我有一个关键字列表，然后是页面上包含这些关键字的句子列表。我想让关键字列表可点击。当用户单击关键字时，该关键字的所有出现都会在句子中突出显示。
我如何使用 jQuery 或原始 Javascript 来做到这一点？
我能想到的唯一方法是用一个包含自身作为类名的类来包装页面上的每个单词。然后制作关键字按钮，将突出显示类别添加到匹配的单词类别中。这可能有效，但似乎有很多不必要的代码注入。
关键词列表
<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>.
最好的方法可能是使用.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/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
