Greasemonkey：突出显示 HTML 文件中的许多单词

Posted 2023-03-06

【中文标题】Greasemonkey：突出显示 HTML 文件中的许多单词

【英文标题】：Greasemonkey: Highlight many words in a HTML-File

【发布时间】：2015-12-08 17:56:41

【问题描述】：

我想使用 Greasemonkey 来突出显示两个单词，例如“巴塞尔，伯尔尼”。如果我只使用巴塞尔以下版本有效。不是很好但足够好。但是当我使用两个词时，突出显示不起作用。

// ==UserScript==
// @name        highlight-some-words
// @description highlight some words in html
// @grant       none
// ==/UserScript==

document.body.innerHTML= document.body.innerHTML.replace(/Basel|Bern/g, function(m)
    return '<span style="background-color:lightgreen">'+m+'</span>'
);

编辑：有趣的是，该脚本适用于 ***.com，但不适用于 google.com。为什么？那么如何修改脚本呢？

【问题讨论】：

在搜索 Basel 和 Bern 之后在 google.com 上运行良好（通过控制台）......也许作为 GM 脚本，它正在运行为时过早

您可以发表评论作为答案吗？非常感谢！ :)

您通过分配给 innerHTML 丢弃并重建整个页面，因此所有事件处理程序都将丢失。

@wOxxOm 提出了一个很好的观点。我会寻找一种更好的方法来做你想要实现的目标

【参考方案1】：

正如我在评论中所说，在搜索巴塞尔和伯尔尼之后，在 google.com 上运行良好（通过控制台）......也许作为 GM 脚本，它运行 为时过早

@wOxxOm 提出了一个很好的观点 - 更改 innerHTML 会弄乱页面中的事件处理程序，更好的方法是仅更改文本节点。以下可能不是最有效的方法，但它是我多年前写的一个greasemonkey脚本的派生，当时greasemonkey还不到一岁！

function highlightWord(word) 
    var xpath = "//text()[contains(., '" + word + "')]";
    var texts = document.evaluate(xpath, document.body, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
    for (n = 0; n < texts.snapshotLength; n++) 
        var textNode = texts.snapshotItem(n);
        var p = textNode.parentNode;
        var a = [];
        var frag = document.createDocumentFragment();
        textNode.nodeValue.split(word).forEach(function(text, i) 
            var node;
            if (i) 
                node = document.createElement('span');
                node.style.backgroundColor = 'lightgreen';
                node.appendChild(document.createTextNode(word));
                frag.appendChild(node);
            
            if (text.length) 
                frag.appendChild(document.createTextNode(text));
            
            return a;
        );
        p.replaceChild(frag, textNode);
    

highlightWord('Basel');
highlightWord('Bern');

【讨论】：

如何做到不区分大小写？

不确定，您看过 xpath 文档吗，可能有一些您可以做的事情