How to highlight words in a table with a filter?

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>