2015-12-10 37 views
0

我正在尋找一種方法,可以搜索特定單詞的整個HTML文檔,然後將該單詞的每個實例與圖像進行交換。在Javascript中交換圖像的文本

我的問題是,我不知道內容是什麼也因爲它是內容是其它地方進行編輯動態頁面和網站只是拉它在這樣引用class和id是困難的。

我創建了一個簡單的例子,其文字可能與內容相似,但是我遇到的問題是我的腳本將替換整個文檔(我相信是因爲.html?),我只是希望它替換特定的文本片段。

<p>hi</p> 
<p>j</p> 


var x = $('body:contains("hi")'); 
     x.html('<img src="/Content/by_car.jpg" />'); 

難道有人指着我正確的方向嗎?

在此先感謝

+2

'x.html(x.html()代替( '喜', ''));' – sed

+0

謝謝!!!!!!!!!!! – scottdavidwalker

+1

你可能想要做一些正則表達式來確保你替換的「hi」不在標籤中。如果你不可以與「 dden「/>最終這不會在大多數瀏覽器正確地呈現 – ghangas

回答

1

您需要更換原來的HTML像這樣x.html(x.html().replace('hi', '<img src="/Content/by_car.jpg" />'));

而且,這將是壞的,如果,例如,你將有<p class="hiblo">hi</p>。在這個canse中,它將取代hiblohi中的hip標記,從而破壞您的標記。

一般來說,你可以使用某種類型的正則表達式,但它仍然不推薦使用正則表達式來解析HTML。

+0

感謝建議,實際交換圖像將使用非常具體的代碼,而不是通用的單詞,如「嗨」,我只是想舉一個簡單的例子:-) 感謝您的解決方案,雖然:-) – scottdavidwalker

0

這是工作代碼。

此代碼還確保腳本和樣式標記不被替換,否則頁面邏輯將被破壞。所以它也被照顧。

<html> 
<head> 
    <script type="text/javascript" src="jquery-1.11.3.min.js" > </script> 
    <style></style> 
</head> 
<body> 
    <h1>hi</h1> 
    <div>hi</div> 

    <input type="button" onclick="return replaceWithImage()" value="replace with image"/> 

    <script type="text/javascript"> 

     function replaceWithImage() { 
      var x = $('body').find(':contains("hi")'); 

      x.each(function(){ 
       if($(this).prop('tagName') != 'SCRIPT' && $(this).prop('tagName') != 'STYLE') 
        $(this).replaceWith('<img src="/Content/by_car.jpg" />'); 



      }); 

      return false; 

     } 


    </script> 

</body> 
</html>