How to process search output from a table using regex?

Question

when you search exact words like "John Paul" or "John Mccartney", the result shows the row containing the searched word from the tables.

Now my problem is when you searched the words containing the parenthesis or dash like "SMS Global (Help Desk)" or UAE-Dubai it doesn't even work.

Here is my function:

<script>
function myFunction() {
  // Declare variables
  var input, filter, table, tr, td, i;
  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++) {
    if (!tr[i].classList.contains('header')) {
      (td = tr[i].getElementsByTagName('td')), (match = false);
      for (j = 0; j < td.length; j++) {
        if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
          match = true;
          break;
        }
      }
      if (!match) {
        tr[i].style.display = 'none';
      } else {
        tr[i].style.display = '';
      }
    }
  }
}
</script>

Are you asking what you would do to update this code to use regex instead of exact match? — jwatts1980, Nov 17 '19 at 19:15
Also, this line `td[j].innerHTML.toUpperCase().indexOf(filter)` is the exact match.. you said it's not matching parenthesis and dashes. Have you looked at `td[j].innerHTML` to see if it is using HTML entities like ` ` instead of the actual characters? — jwatts1980, Nov 17 '19 at 19:17
@jwatts1980 Yes exactly. I want to use regex instead of exact match. — Hussnain Fareed, Nov 18 '19 at 09:38

score 0 · Answer 1 · answered Nov 18 '19 at 18:10

I have not tested out this code, so it might take some adjustments. The main idea is that to use the search string in a RegExp, you have to convert the text into a RegExp friendly pattern string, which requires escaping some characters.

function myFunction() {
  // Declare variables
  var input, filter, table, tr, td, i;
  input = document.getElementById('myInput');
  filter = input.value; //<-- removed to upper case 
  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++) {
    if (!tr[i].classList.contains('header')) {
      (td = tr[i].getElementsByTagName('td')), (match = false);
      for (j = 0; j < td.length; j++) {
        if (isMatch(td[j].innerText, filter)) { //<--changed to innerText
          match = true;
          break;
        }
      }
      if (!match) {
        tr[i].style.display = 'none';
      } else {
        tr[i].style.display = '';
      }
    }
  }
}

function isMatch(text, filter) {
  if (text === null || text.length == 0) return false;

  //return true or false depending on which behavior you want when the filter is empty
  if (filter === null || filter.length == 0) return false; 

  //escape the filter 
  filter = filter.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  //loosely match spaces
  filter = filter.replace(' ', '.*?');

  //case insensitive search 
  return text.match(new RegExp(filter, 'i'));
}

References: Escape string for use in Javascript regex

How to process search output from a table using regex?

1 Answers1