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

【问题标题】：How to highlight all occurrences of a word on a page with Javascript or jQuery?如何使用 Javascript 或 jQuery 突出显示页面上所有出现的单词？
【发布时间】：2015-11-14 19:07:51
【问题描述】：

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

如何使用 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>.

【问题讨论】：

当您说“突出显示”时，您的意思是添加样式还是选择那些词？（对于前者，你不应该担心节点注入，浏览器可以处理。对于后者，它可能是一个复杂的脚本，可能比前者更消耗）
以下是您正在寻找的确切答案。 stackoverflow.com/a/45519242/2792959
这是您正在寻找的答案。也有自定义CSS。 stackoverflow.com/a/45519242/2792959

标签： javascript jquery css highlighting

【解决方案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>

小提琴：https://jsfiddle.net/xukay3hf/3/

更新了 Fiddle，使现有单词突出显示：https://jsfiddle.net/avpLn7bf/3/

【讨论】：

对不起，这不是抄袭我的答案吗？您所做的只是将其转换为 vanilla javascript
哈哈哈@AmmarCSE！当问题被问到（并且没有答案）时，我开始研究这个答案，然后回来发布它。信不信由你，我从头开始编写代码，而没有参考您的（或其他任何人的代码）。这很有趣，因为您转发了别人的答案 (stackoverflow.com/questions/32011745/…) 并试图以抄袭的名义指责我。这不是比赛，只是想在我的空闲时间帮助人们。
我累了，要睡觉了。我会假设你有最好的意图。对不起我的体育精神不好:)
嘿，不，我感到羞耻，因为有一刻我忘记了它的真正意义（帮助他人）。谁在乎几张选票！
此实现将破坏#sentences 分隔符中的任何结构（如果有段落、锚点、图像等...）

【解决方案2】：

只有当包含在搜索结果中时，您才能使用特定类包装单词。下次该词不包含在搜索结果中时，将删除换行：

var highlightRe = /<span class="highlight">(.*?)<\/span>/g,
    highlightHtml = '<span class="highlight">$1</span>';

$(function() {
    $('#search').change(function() {
        var term = $(this).val();
        var txt = $('#txt').html().replace(highlightRe,'$1');
        if(term !== '') {
            txt = txt.replace(new RegExp('(' + term + ')', 'gi'), highlightHtml);
        }    
        $('#txt').html(txt);    
    });
});

.highlight {
    background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="text" id="search"/>

<div id="txt">
I have a list of keywords and then a list of sentences containing those keywords on a page. I'd like to make the keyword list clickable. When a user clicks on a keyword, all occurrences of that keyword would highlight in the sentences.

How can I do this with jQuery or raw Javascript?

The only way I can think is to wrap every word on the page with a class containing itself as the class name. Then make the keywords buttons that add a highlight class to the matching word classes. This may work, but seems like a LOT of unnecessary code injection.
</div>

【讨论】：

您的代码运行良好。但是一个错误..如果我在 div 中有任何标签，它也会突出显示。例如：<div id= "txt"> <span> hey!! </span> Special </div> 我搜索“sp”，它包括跨度。如何解决这个问题，使其不包含标签
jsfiddle.net/wcu0q4px/1 在这个小提琴中搜索 tr 。它为表格内容提供了一些应该在此处更改以使其完美运行的内容。你能帮我找出它是什么吗

【解决方案3】：

glossarizer 插件会执行此操作。你把你的句子放到一个 JSON 文件中，每个出现的地方都有一个虚线下划线，并作为一个工具提示。将replaceOnce 参数设置为false，以便突出显示每个事件。您可以更改 js 文件以自定义外观，并添加包含单词的任何标题标签，因为通常人们不希望这些突出显示。

【讨论】：