Question

在我的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);
            });
        });
    }
}

在我的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/

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

1 个答案: