How to highlight the matching sub-string from search result in JavaScript

Question

I am a newbie in JavaScript. Trying to build a small user interface that searches a list of words when we fire a query into the search box. With that, I want to highlight the matching sub-string of each word in the list box so that the user can see at a glance how the word matches the query. To achieve this target I include highlight function in my code by referring some basic JS tutorials. But due to some mistake, it is not working. Can you please help me. Thanks..!!!

    function getFullName(item,index) { 
        return "<li>"+item.firstname + "<span class='tool-tip'>" +item.lastname+"</span> "+ item.id+"</li>";
    }
    function myFunction1() {
        document.getElementById("demo").innerHTML = persons.map(getFullName);
    }

    function myFunction() {
        var input, filter, ul, li, a, i,count=0;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();

      var longWords = persons.filter(function(person){

         return  person.firstname.toUpperCase().indexOf(filter) > -1 
    });
        var message = "Result:" + longWords.length + " words containing '" + input.value;
        document.getElementById("demo").innerHTML=message;

        ul = document.getElementById("myUL");
        ul.innerHTML= longWords.map(getFullName);
        highlight();
    }
    function highlight(){
        var inputText, filter1,innerHTML,index;
        inputText = document.getElementById("myInput");
        console.log(inputText);
        filter1 = inputText.value.toUpperCase();
        console.log(filter1);
        innerHTML1 = inputText.innerHTML;
        console.log(innerHTML1);
        index1 = innerHTML1.indexOf(filter1);
    if ( index1 >= 0 )
    { 
        innerHTML1 = innerHTML1.substring(0,index1) + "<span class='highlight'>" + innerHTML1.substring(index1,index1+filter1.length) + "</span>" + innerHTML1.substring(index1 + filter1.length);
        filter1.innerHTML = innerHTML1; 
    }

}

here is the CSS file:

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

Answer 1

Following is from my bookmarked code for highlighting. Type a text in textfield and you can see the highligted text in yellow

 function highlight_text_nodes($nodes, word) { if (!$nodes.length) { return; } var text = ''; // Concatenate the consecutive nodes to get the actual text for (var i = 0; i < $nodes.length; i++) { text += $nodes[i].textContent; } var $fragment = document.createDocumentFragment(); while (true) { // Tweak this if you want to change the highlighting behavior var index = text.toLowerCase().indexOf(word.toLowerCase()); if (index === -1) { break; } // Split the text into [before, match, after] var before = text.slice(0, index); var match = text.slice(index, index + word.length); text = text.slice(index + word.length); // Create the <mark> var $mark = document.createElement('mark'); $mark.className = 'found'; $mark.appendChild(document.createTextNode(match)); // Append it to the fragment $fragment.appendChild(document.createTextNode(before)); $fragment.appendChild($mark); } // If we have leftover text, just append it to the end if (text.length) { $fragment.appendChild(document.createTextNode(text)); } // Replace the nodes with the fragment $nodes[0].parentNode.insertBefore($fragment, $nodes[0]); for (var i = 0; i < $nodes.length; i++) { var $node = $nodes[$nodes.length - i - 1]; $node.parentNode.removeChild($node); } } /* * Highlights all instances of `word` in `$node` and its children */ function highlight($node, word) { var $children = $node.childNodes; var $current_run = []; for (var i = 0; i < $children.length; i++) { var $child = $children[i]; if ($child.nodeType === Node.TEXT_NODE) { // Keep track of consecutive text nodes $current_run.push($child); } else { // If we hit a regular element, highlight what we have and start over highlight_text_nodes($current_run, word); $current_run = []; // Ignore text inside of our <mark>s if ($child.nodeType === Node.ELEMENT_NODE && $child.className !== 'found') { highlight($child, word); } } } // Just in case we have only text nodes as children if ($current_run.length) { highlight_text_nodes($current_run, word); } } /* * Removes all highlighted <mark>s from the given node */ function unhighlight($node) { var $marks = [].slice.call($node.querySelectorAll('mark.found')); for (var i = 0; i < $marks.length; i++) { var $mark = $marks[i]; // Replace each <mark> with just a text node of its contents $mark.parentNode.replaceChild(document.createTextNode($mark.childNodes[0].textContent), $mark); } } var $p = document.querySelector('p'); document.querySelector('input').onkeyup = function() { unhighlight($p); if (this.value.length) { highlight($p, this.value); } }; 

 <input type="text" /> <p> <b>JavaScript</b> is a high-level, dynamic, multi-paradigm, object-oriented, prototype-based, weakly-typed language traditionally used for client-side scripting in web browsers. JavaScript can also be run outside of the browser with the use of a framework like Node.js, Nashorn, Wakanda, or Google Apps Script. Despite the name, it is unrelated to the Java programming language and shares only superficial similarities. Unless a tag for a framework or library is also included, a pure JavaScript answer is expected for questions with the javascript tag. </p> 

Edit, based on comment. Here is the jsfiddle version for OP.

The jsfiddle version just tweek OP's code to give her an insight of how it works