如何使用过滤器突出显示表格中的单词？

Question

I want to create a table with a filter which highlights the keywords that has been searched while displaying the search results.

I like the answer of this question: live highlight a word(s) with jQuery but I couldn't figure out how to implement it in my existing code.

 function myFunction() { // Declare variables var input, filter, table, tr, td, i, txtValue; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); // Loop through all table rows, and hide those who don't match the search query for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[0]; if (td) { txtValue = td.textContent || td.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } }

 <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search..."> <table id="myTable"> <tr> <td> <h1>Text</h1> <p><span class="red">Text</span></p> <p>Text</p> </td> <td><img src=".."></td> </tr> <td> <h1>Text</h1> <p><span class="red">Text</span></p> <p>Text</p> </td> <td><img src=".."></td> </table>

Answer 1

Try mark.js ( https://markjs.io/ ):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"> 
</script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/mark.js/7.0.0/mark.min.js'> 
</script>

and

function myFunction(txelem, destid) {

   var instance = new Mark(document.querySelector('#' + destid));
   instance.unmark({
      done: function() {
         instance.mark(txelem.value, {
             caseSensitive: false
         });
     }
  });

  return;
}

A running example can be found on https://jsfiddle.net/Abeeee/atmg9peq/11/

Answer 2

Could you please try this

 function createTagAndAppendTo(tag, txt, elem){ let customTag = document.createElement(tag); customTag.textContent = txt; elem.append(customTag); } function myFunction(evt) { // Declare variables let input, filter, table, tr, td, i, txtValue; let displayTr = []; filter = evt.value; table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); let regExp = new RegExp(filter); if (!filter) { for (let i = 0; i < tr.length; i++) { tr[i].style.display = ''; } return; } // Loop through all table rows, and hide those who don't match the search query for (let i = 0; i < tr.length; i++) { let trStyle = tr[i].style.display; td = tr[i].getElementsByTagName("td"); for (let j = 0; j < td.length; j++) { txtValue = td[j].textContent; let count = (txtValue.match(regExp) || []).length; displayTr[i] = displayTr[i] ? displayTr[i] : count; if (count !== 0) { td[j].innerText = ''; let strArray = txtValue.split(filter); let loopLength = strArray.length - 1; for (let i = 0; i < loopLength; i++) { createTagAndAppendTo('span', strArray[i], td[j]); createTagAndAppendTo('mark', filter, td[j]); } createTagAndAppendTo('span', strArray[loopLength], td[j]); } else { let tdStr = td[j].textContent; td[j].innerText = ''; td[j].textContent = tdStr; } } if(displayTr[i] !== 0) { tr[i].style.display = ''; } else { tr[i].style.display = 'none'; } } } 

 <input type="text" id="myInput" onkeyup="myFunction(this)" placeholder="Search..."> <table id="myTable"> <tr> <td>...</td> <td>success</td> <td>Substring</td> </tr> <tr> <td>...</td> <td>...</td> <td>...</td> </tr> </table>