Greasemonkey：突出显示HTML文件中的许多单词 [英] Greasemonkey: Highlight many words in a HTML-File

问题描述

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

  // == UserScript == 
 // @name highlight-some-words 
 // @description突出显示html中的某些单词
 // @grant none 
 // == / UserScript == 
 
文档.body.innerHTML = document.body.innerHTML.replace（/ Basel | Bern / g，function（m）{
 return'< span style =background-color：lightgreen>'+ m +'< ; / span>'
}）; 
  

编辑：有趣的是，脚本在stackoverflow.com上运行，但不是google.com。为什么？如何修改脚本呢？

解决方案

正如我在评论中所说的，在google.com上正常工作在寻找巴塞尔和伯尔尼之后...也许作为GM脚本运行太早

@wOxxOm提出了一个很好的观点 - 改变innerHTML会将页面中的事件处理程序搞乱，但更好的方法是只更改文本节点。以下可能不是这样做的最有效的方式，但它是我多年前写的许多油烟猴子脚本的衍生物，早在greasemonkey还不到一岁时!!

 函数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  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'）; 
  

I want to use Greasemonkey to highlight two words e.g. "Basel, Bern". If I use only Basel the version below works. Not very well but well enough. But when I use two words the highlighting doesn't work.

// ==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>'
});

EDIT: Interesting, the script works on stackoverflow.com but not google.com. Why? And how to modify the script then?

解决方案

As I said in the comment, works fine (through console) on google.com AFTER searching for Basel and Bern ... perhaps as a GM script it is running too early

@wOxxOm raises a very good point - changing innerHTML will mess up event handlers in the page, a better way to do it would be to change only text nodes. The following is probably not the most efficient way of doing this, but it's a derivative of a greasemonkey script i wrote many many years ago, back when greasemonkey was less than a year old!!

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

这篇关于Greasemonkey：突出显示HTML文件中的许多单词的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！