JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" id="search-value">
<button id="search-submit">search</button>
<table>
<thead>
<tr>
<th>test</th>
<th>field two</th>
</tr>
</thead>
<tbody class="searchable">
<tr>
<td>my name is</td>
<td>dan</td>
</tr>
<tr>
<td>I am from</td>
<td>Germany</td>
</tr>
</tbody>
</table>
CSS
.highlight {
color: white;
background-color: navy;
}
JavaScript
$('#search-submit').on('click', function(event) {
var v = $('#search-value').val();
var t = $('.searchable td');
var c = 'highlight'; // css class to add to the found string
$.each(t, function(idx, el) {
var regex = new RegExp("\\b" + v + "\\b", "gi");
el.innerHTML = el.innerHTML.replace(regex, function(matched) {
return "<span class=\"" + c + "\">" + matched + "</span>";
});
});
});