1

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

不幸的是，我所走的道路导致了一些死胡同。

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

其次，我现在偷偷怀疑没有好方法来加粗该 createTextNode。

那么#1 可以解释为什么那个循环对我不起作用，而#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); 


    }}
4

2 回答 2

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]);     
    }
}
于 2013-04-07T15:07:56.930 回答
0

以下是整个脚本使用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>");


这使用：

于 2013-04-07T22:33:09.240 回答