Javascript 在浏览器中自动高亮显示特定单词

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

在本例中，我正在查看espn.com，希望在加载页面时，文本中立即突出显示“bryant”的所有实例

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

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

此时，所有内容都正确加载，但没有以粗体显示“bryant”的迭代

---

谢谢

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

网站上有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>')
}

var list=document.getElementsByClassName（“foo”）
var search_word=“”
var contents=[]
对于（变量i=0；i

希望这会有帮助

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

---

例如：

我刚刚执行了

var list=document.getElementsByClassName（“foo”）；控制台日志（列表）它什么也不记录…我猜我根本不明白你的意思。你能详细说明一下吗？谢谢@如果您必须让这个元素包含一些内容，这是文档中具有foo类的元素数组。您必须在生成文档后运行此代码我希望此代码能够应用于任何网页，这就是我在最初尝试中尝试使用*通配符的原因。如何让它自动迭代任何DOM，查看文本，并在特定文本周围插入子节点？好的，谢谢JSFIDLE。然而，在使用内容脚本时，我需要突出显示以符合任何页面；因此，我不能为类指定一个预先确定的名称，因为每个页面可能不同。如何让类自动拾取页面中的任何内容？然后加载document.body而不是特定元素
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>')
}