Javascript 用文本替换图像

我正在尝试编写一个Greasemonkey脚本，该脚本将获取一个包含一系列未标识链接图像的网页，并将其替换为粗体文本

不幸的是，我所走的道路导致了几个死胡同

首先，出于某种原因，我使用的代码将图像替换为[CLICK]文本，然后立即再次运行父/替换并删除[CLICK]

其次，我现在暗自怀疑，没有好的方法来加粗createTextNode

那么，有人能解释一下为什么循环对我不起作用，并告诉我正确的方法，这样我就可以将添加的文本加粗

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


    }}

var smiliesList=document.evaluate(
“//img[contains（@src，'smilies'）]”，document.body，null，XPathResult.UNORDERED\u NODE\u SNAPSHOT\u TYPE，null）；
var prefixReplace=document.createTextNode（“[单击]”）；
var prefixImgSrc=（'smilies/goofyimage.png'）
对于（var i=0；i我认为在循环中时，需要为每个图像创建一个新的替换文本节点。您当前只在循环之前创建一个节点

另外，要创建粗体文本，只需创建一个
元素，然后使用
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);              
      }      
  }
}

我认为在循环中，您需要为每个图像创建一个新的替换文本节点。您当前只在循环之前创建一个节点

另外，要创建粗体文本，只需创建一个
元素，然后使用
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);              
      }      
  }
}

以下是整个脚本的易用性：

/==UserScript==
//@name\u你的脚本\u名字
//@包括http://YOUR_SERVER.COM/YOUR_PATH/*
//@需要http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
//@grant GM_addStyle
//==/UserScript==
/*-需要@grant指令来解决设计变更
在GM 1.0中引入。它可以恢复沙箱。
*/
//smilies/goofyimage.png区分大小写
var goofyImages=$（“img[src*='smilies/goofyImages.png']）；
goofyImages.replaceWith（“[单击]”）；



它使用：




以下是整个脚本的易用性：

/==UserScript==
//@name\u你的脚本\u名字
//@包括http://YOUR_SERVER.COM/YOUR_PATH/*
//@需要http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
//@grant GM_addStyle
//==/UserScript==
/*-需要@grant指令来解决设计变更
在GM 1.0中引入。它可以恢复沙箱。
*/
//smilies/goofyimage.png区分大小写
var goofyImages=$（“img[src*='smilies/goofyImages.png']）；
goofyImages.replaceWith（“[单击]”）；



它使用：




谢谢！将节点放在循环中修复了前半部分，但replaceChild对以下事实犹豫不决（我想是吧？）textNode元素不是真正的节点。只是更新了。从
replaceChild
切换到
removeChild
，然后再切换到
appendChild
，哪一个更好。如果不这样做，可能需要查看HTML.Close，但您应该测试代码。您会发现它崩溃了（尝试在移除节点后使用
节点
），否则会扰乱（ex）图像的位置。谢谢！将节点放入循环中修复了前半部分，但替换子节点在（我想？）这一事实上犹豫不决textNode元素不是真正的节点。只是更新了。从
replaceChild
切换到
removeChild
，然后再切换到
appendChild
，哪一个更好。如果不这样做，可能需要查看HTML.Close，但您应该测试代码。您会发现它崩溃了（尝试在删除节点后使用
节点
），否则会扰乱（ex）图像的位置。下面是整个脚本使用“噢，我的上帝，谢谢你”的简单程度。下面是整个脚本使用“噢，我的上帝，谢谢你”的简单程度
// ==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>");