Highlight all matching words in a div from text input

Question

I created a function that highlights matching words in a div. but if there are two identical words separated by another word, then only the first word is highlighted. so, for example, if the search term was the word “burn”, and the text had the sentence “write the child’s burn”, I would like it to highlight both “burns”. this jsFiddle demonstrates how it only highlights the first "burn". Here is the code below. Any help is greatly appreciated. Thanks for reading.

CSS

.highlight{ font-weight:bold; color:green; } 

HTML

 <input id = "search" type ="text" value = "burn"> <div class = "searchable">burn baby burn</div> 

Javascript

 if($('#search').val().length !== 0){ $('.searchable').each(function(){ $(this).html($(this).html().replace($('#search').val(),"<span class = 'highlight'>"+$('#search').val()+"</span>")); }); } 

Answer 1

You can pass the regular expression to replace () instead of a string, with the g modifier to make the replacement perform global matching.

 if($('#search').val().length !== 0){ $('.searchable').each(function(){ var search_value = $("#search").val(); var search_regexp = new RegExp(search_value, "g"); $(this).html($(this).html().replace(search_regexp,"<span class = 'highlight'>"+search_value+"</span>")); }); } 

Answer 2

1. Take care of regular expressions for special characters .

2. Support uppercase and lowercase letters.

Therefore, taking care of the above things with a case-insensitive search (in most cases this is desirable; otherwise just delete the “i”), here is the final code ...

 if ($('#search').val().length !== 0) { $('.searchable').each(function() { //Handle special characters used in regex var searchregexp = new RegExp($("#search").val().replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), "gi"); //$& will maintain uppercase and lowercase characters. $(this).html($(this).html().replace(searchregexp, "<span class = 'highlight'>$&</span>")); }); } 

And the violin .

Answer 3

This is where jsfiddle works for you. Basically, get the text from the div, divide it by a space, skip the words and see if it matches.

 var term = $('#search').val().trim().toLowerCase(); if (term.length > 0) { var source = $('.searchable').text(); var words = source.split(' '); var output = ''; $.each(words, function(idx, word) { if (term === word.toLowerCase()) { output += '<span class="highlight">' + word + '</span> '; } else { output += word + ' '; } }); $('.searchable').html(output); } 

Answer 4

Use regex with:

• global flag 'g' to replace all matches
• ignore case 'i' to match all cases

Remember to escape from special characters

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

 const SEARCH_VALUE = $("#search").val().trim(); if (SEARCH_VALUE.length > 0) { $('.searchable').each(function() { const DIV_TEXT_CONTENT = $('.searchable').text(); const SPLIT_CONTENT = DIV_TEXT_CONTENT.split(" "); SPLIT_CONTENT.forEach((word, index) => { const SEARCH_REGEXP = new RegExp(escapeRegExp(SEARCH_VALUE), "gi") if (SEARCH_REGEXP.test(word)) $(this).html($(this).html().replace(SEARCH_REGEXP, "<span class = 'highlight'>" + word + " </span>")); }); }) } function escapeRegExp(text) { return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"); } 

 .highlight { font-weight: bold; color: green; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="search" type="text" value="BuRn"> <div class="searchable">burn baby burn</div>