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

我相信你需要在循环中为每个图像创建一个新的替换文本节点。您目前只在循环之前创建单个节点。

另外，要创建粗体文字，只需创建一个<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]);     
    }
}

Answer 2

整个脚本与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>");

这用：

用文本替换图像

2 个答案: