Question

我正在寻找一个脚本，而不是根据他们的位置突出显示一定数量的单词。例如，对于以下内容我想只突出显示第二，第三和第四个单词：

<p>
    Quisque bibendum sem ut lacus. Integer dolor ullamcorper libero.
    Aliquam rhoncus eros at augue. Suspendisse vitae mauris.
</p>

结果应该是：

<p>
    Quisque <span class="highlight">bibendum sem ut</span> lacus. Integer dolor ullamcorper libero.
    Aliquam rhoncus eros at augue. Suspendisse vitae mauris.
</p>

非常感谢！

Answer 1

这个jQuery插件正是你要找的：

jQuery Highlight

它完全符合您的要求，遍历DOM TextNodes并查找要搜索的文本，当它找到一个匹配时会创建一个span元素。

用法：

$('p').highlight('bibendum sem ut');

Answer 2

我写了一个非常简单的函数，它使用jQuery迭代用.highlight类包装每个关键字的元素。

function highlight_words(word, element) {
    if(word) {
        var textNodes;
        word = word.replace(/\W/g, '');
        var str = word.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);
            });
        });
    }
}

更多信息：

http://www.hawkee.com/snippet/9854/

：如何使用jQuery突出显示某些单词

2 个答案: