用文本替換圖像

Question

我正在嘗試編寫一個Greasemonkey腳本，該腳本將使網頁具有一系列未ID的鏈接圖像，並用粗體文本替換它們。

我正在採取的道路不幸導致了幾個死衚衕。

首先，代碼由於某些原因將[CLICK]文本替換爲圖像，然後立即再次通過父/替換並刪除[CLICK]。

其次，我現在有一個偷偷摸摸的懷疑，沒有好的方法來粗體createTextNode。

因此，有人可能會解釋爲什麼該循環不適合我，＃2告訴我正確的方式來做到這一點，以便我可以添加文字爲粗體。

var smiliesList = document.evaluate(
"//img[contains(@src,'smilies')]", document.body, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); 

var prefixReplace = document.createTextNode('[CLICK]'); 
var prefixImgSrc = ('smilies/goofyimage.png') 


for (var i=0;i<smiliesList.snapshotLength;i++) { 

    var node = smiliesList.snapshotItem(i); 

     if (node.src == prefixImgSrc) { 

      node.parentNode.replaceChild(prefixReplace, node); 


    }} 

Answer 1

這裏的整個腳本是多麼容易jQuery：

// ==UserScript== 
// @name  _YOUR_SCRIPT_NAME 
// @include http://YOUR_SERVER.COM/YOUR_PATH/* 
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js 
// @grant GM_addStyle 
// ==/UserScript== 
/*- The @grant directive is needed to work around a design change 
    introduced in GM 1.0. It restores the sandbox. 
*/ 

// smilies/goofyimage.png is case-sensitive 
var goofyImages = $("img[src*='smilies/goofyimage.png']"); 

goofyImages.replaceWith ("<b>[CLICK]</b>"); 

此用途：

• jQuery's Attribute Contains Selector
• jQuery's replaceWith()

Answer 2

我相信你需要爲每個圖像創建一個新的替換文本節點，當你在循環中。您目前只在循環之前創建單個節點。

此外，要創建粗體文本，只需創建一個<b>元素，然後使用innerHTML來放置文本。

var smiliesList = document.evaluate(
"//img[contains(@src,'smilies')]", document.body, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); 

var len = smiliesList.snapshotLength; 

for (var i=0; i<len; i++) { 
    var node = smiliesList.snapshotItem(i), 
     p; 

    if (node.src.indexOf('smilies/goofyimage.png') > -1) { 
     var textNode = document.createElement('b'); 
     textNode.innerHTML = '[CLICK]';  

     if (node.parentNode) { 
     p = node.parentNode; 
     p.removeChild(node); 
     p.appendChild(textNode);    
     }  
    } 
} 

此外，我忍不住想到可能有更好的方法來做到這一點。我建議你用這個版本去 - 的代碼和更多的瀏覽器兼容性更少的行：

var imgs = document.getElementsByTagName('img');   
for (var i = imgs.length - 1; i >= 0; i--) { 
    if (imgs[i].src.indexOf('smilies/goofyimage.png') > -1) { 
     var textNode = document.createElement('b'); 
     textNode.innerHTML = '[CLICK]';  
     imgs[i].parentNode.replaceChild(textNode, imgs[i]);  
    } 
}