自动突出显示浏览器中的特定单词

Question

在我的 chrome 扩展程序的内容脚本中，我试图注入代码以突出显示页面中的特定单词。

在这种情况下，我正在查看 espn.com，并希望在页面加载时立即在文本中突出显示所有“布莱恩特”实例。

这是我在查看了几个与我类似的问题后自定义的当前代码：

var all = document.getElementsByTagName("*");
highlight_words('Bryant', all);

function highlight_words(keywords, element) {
    if(keywords) {
        var textNodes;
        keywords = keywords.replace(/\W/g, '');
        var str = keywords.split(" ");
        $(str).each(function() {
            var term = this;
            var textNodes = $(element).contents().filter(function() { return this.nodeType === 3 });
            textNodes.each(function() {
                var content = $(this).text();
                var regex = new RegExp(term, "gi");
                content = content.replace(regex, '<span class="highlight">' + term + '</span>');
                $(this).replaceWith(content);
            });
        });
    }
}

在我的 jquery-ui.css 中，我有以下代码。我知道它现在没有突出显示，但我只是想获得概念证明：

.highlight {
    font-weight: bold;
}

此时一切都正常加载，但没有以粗体读取“bryant”的迭代。

谢谢！

Answer 1

执行此操作的最快方法是定义要搜索的突出显示内容，例如：

您在网站上有 3 个部分，左侧的导航栏、顶部的标题和内容。

让我们将.foo 类附加到文章中。

var list = document.getElementsByClassName("foo")
var search_word = ""
var contents = []

for(var i = 0; i < list.length; i++){
var contents = list[i].textContext.split(search_word)
list[i].textContext = contents.join('<span class="heighlight\">'+search_word+'</span>')
}

希望它会有所帮助。

（高亮绑定到具有 .foo 类的元素）

一些例子：https://jsfiddle.net/Danielduel/0842qntu/2/