highlighting all matching words in div from text input

1. Take care of regex special characters.

2. Maintain uppercase & lowercase.

So taking care of above things with case insensitive search (in most cases, this is desired; otherwise just remove "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 a fiddle.

Here's a working jsfiddle for you. Basically, get the text from the div, split it on space, loop through the words and see if one 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); } 

Use regular expression with :

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

Do not forget to escape 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>

The existing answers focus on innerHTML manipulation. It's possible to do entirely with DOM APIs:

function highlight(term) { // Select all Elements. There is no method to query all Nodes directly. for (const element of document.querySelectorAll("*")) { // Skip element if it doesn't contain target string if (!element.textContent.includes(term)) continue; // Traverse each node by inspecting the childNodes of every element for (const child of element.childNodes) { // Skip node if its not a text node if (child.nodeType !== Node.TEXT_NODE) continue; // Skip node if it doesnt contain our target string if (!child.textContent.includes(term)) continue; // We want to break up the contents into chunks // of text which don't need to be highlighted // You can get creative here if you want // to use more term advanced matching const textNodes = child.data.split(term).map(substr => { return document.createTextNode(substr); }); // We don't want to modify the overall structure of the DOM // a fragment lets us group multiple nodes together without // bundling it under another new node const fragment = document.createDocumentFragment(); // Populate the new fragment for (const node of textNodes) { // Add every text node to the new node fragment.appendChild(node); // Interweave the term in between them within a span const el = document.createElement("span") el.textContent = term; // Add some styling el.style.backgroundColor = 'yellow'; fragment.appendChild(el); } // Remove extra term that was // generated the interweaving fragment.removeChild(fragment.lastChild); // Swap current child node for new fragment element.replaceChild(fragment, child); } } } // highlight a word highlight("JavaScript")