How to highlight all occurrences of a word on a page using javascript or jQuery?

Question

I have a list of keywords, and then a list of sentences containing these keywords on the page. I would like to make the keyword list available. When a user clicks on a keyword, all occurrences of that keyword are highlighted in sentences.

How can I do this using jQuery or raw Javascript?

The only way I can think of is to wrap every word on the page with a class containing itself as the name of the class. Then make keyword buttons that add a highlight class to the corresponding word classes. This might work, but there seem to be a lot of unnecessary code injections.

Keyword List

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

suggestions

 <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

The best way, probably, is to use the .highlight class to highlight words and simply wrap matches in between this highlight class. Here is an example:

 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/

Updated Fiddle that leaves highlighting an existing word: https://jsfiddle.net/avpLn7bf/3/

Answer 2

You can only wrap words in a specific class if they are included in the search result. The wrapper will be deleted the next time the word is not part of the search result:

 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> 

Answer 3

The glossarizer plugin will do this. You put your sentences in a JSON file, and each event is assigned a dashed underline and acts as a tooltip. Set the replaceOnce parameter to false for each event that will be highlighted. You can modify the js file to customize the look and add title tags that contain words, because usually people don’t want them to be highlighted.