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

Question

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

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

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

关键字列表

<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

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

Answer 2

最好的方法可能是使用 .highlight class 来突出显示单词，然后将匹配项包装在带有突出显示 class 的范围内。这是一个基本示例：

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"></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/

Answer 3

只有当包含在搜索结果中时，您才可以用特定的 class 换行。下次该词不属于搜索结果时，将删除换行：

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

$(function() {
    $('#search').change(function() {
        var term = $(this).val();
        var txt = $('#txt').html().replace(highlightRe,'');
        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>

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

How to highlight all occurrences of a word on a page with Javascript or jQuery?

javascript

css

jquery

highlighting