javascript - 如何使用 Javascript 或 jQuery 突出显示页面上所有出现的单词？

Question

我有一个关键字列表，然后是页面上包含这些关键字的句子列表。我想让关键字列表可点击。当用户点击一个关键字时，该关键字的所有匹配项都会在句子中突出显示。

如何使用 jQuery 或原始 Javascript 执行此操作？

我能想到的唯一方法是用一个包含自身作为类名的类来包装页面上的每个单词。然后制作关键字按钮，为匹配的词类添加高亮类。这可能有效，但似乎有很多不必要的代码注入(inject)。

关键字列表

<button>this</button>
<button>example</button>

句子

<span class='word_this'>This</span> <span class='word_is'>is</span> <span class='word_an'>an</span> <span class='word_example'>example</span>.

Answer 1

最好的方法可能是使用 .highlight 类来突出显示单词，并将匹配项包装在具有该突出显示类的范围内。这是一个基本示例:

var sentences = document.querySelector('#sentences');
var keywords = document.querySelector('#keywords');

keywords.addEventListener('click', function(event){
    var target = event.target;
    var text = sentences.textContent;
    var regex = new RegExp('('+target.textContent+')', 'ig');
    text = text.replace(regex, '<span class="highlight">$1</span>');
    sentences.innerHTML = text;
}, false);

.highlight {
    background-color: yellow;
}

<div id="keywords">
    <span>This</span> 
    <span>Example</span>.
</div>
<div id="sentences">
    This is an example. An example is shown in this. Here is another example.
</div>

fiddle :https://jsfiddle.net/xukay3hf/3/

更新的 Fiddle 保留了现有的单词突出显示:https://jsfiddle.net/avpLn7bf/3/