用文本替换图像

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]);  
    } 
}