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

Javascript Greasemonkey:突出显示HTML文件中的许多单词,javascript,html,greasemonkey,highlight,Javascript,Html,Greasemonkey,Highlight,我想用Greasemonkey突出显示两个词,例如“巴塞尔,伯尔尼”。如果我只使用巴塞尔协议,下面的版本就可以了。不是很好,但足够好。但当我使用两个词时,突出显示不起作用 // ==UserScript== // @name highlight-some-words // @description highlight some words in html // @grant none // ==/UserScript== document.body.innerHTML

我想用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>'
});
/==UserScript==
//@name突出显示一些单词
//@description突出显示html中的某些单词
//@grant none
//==/UserScript==
document.body.innerHTML=document.body.innerHTML.replace(/Basel | Bern/g,函数(m){
返回“+m+”
});

编辑:有趣的是,这个脚本可以在stackoverflow.com上运行,但不能在google.com上运行。为什么?那么如何修改脚本呢?

正如我在评论中所说,在搜索了Basel和Bern之后,在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');
功能高亮字(word){
var xpath=“//text()[包含(,““+word+”)];
var text=document.evaluate(xpath,document.body,null,XPathResult.UNORDERED\u NODE\u SNAPSHOT\u TYPE,null);
对于(n=0;n
在google.com上搜索巴塞尔和伯尔尼后(通过控制台)效果良好。。。也许作为通用汽车的脚本,它运行得太早了。你能把评论作为答案发布吗?非常感谢!:)您通过分配给innerHTML放弃并重建整个页面,因此所有事件处理程序都将丢失。@wOxxOm提出了一个很好的观点。我想寻找一种更好的方法来实现您想要实现的目标。如何做到不区分大小写?不确定,您看过xpath文档了吗?您可能可以做一些事情