如何在JavaScript中突出顯示搜索結果中匹配的子字符串

Question

我是JavaScript的新手。 嘗試構建一個小型用戶界面，在我們向搜索框發出查詢時搜索單詞列表。 有了這個，我想突出顯示列表框中每個單詞的匹配子字符串，以便用戶可以一目了然地看到單詞與查詢的匹配程度。 為了實現這個目標，我通過引用一些基本的JS教程在我的代碼中包含了高亮功能。 但由於一些錯誤，它無法正常工作。 你能幫我么。 謝謝..！！！

    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; 
    }

}

這是CSS文件：

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

Answer 1

以下是我的書簽代碼突出顯示。 在文本字段中鍵入文本，您可以看到黃色的highligted文本

 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> 

根據評論進行修改。 這是OP的jsfiddle版本。

jsfiddle版本只是調整OP的代碼，讓她了解它是如何工作的