JSFiddle - React, Tailwind, and code Playground

by revzephyr

HTML

<div>
    <input type="text" id="search-criteria" />
</div>
<hr>
<table id="test">
    <tr>
        <td>apple</td>
        <td>banana</td>
        <td>red</td>
        <td>green</td>
        <td>ee</td>
        <td>ana</td>
    </tr>
</table>

CSS

span.s_val {
    background-color:yellow;
}
.highlight {
    background-color:yellow;
}

JavaScript

var keywords = $("#search-criteria").val();
var element = "table#test";

$("#search-criteria").on("keyup", function highlight_words(keywords, element) {

    if (keywords !== "") {
        var textNodes;
        keywords = keywords.replace(/\W/g, '');
        var str = keywords.split(" ");
        $(str).each(function () {
            var term = this;
            var textNodes = $(element).contents().filter(function () {
                return this.nodeType === 3;
            });
            textNodes.each(function () {
                var content = $(this).text();
                var regex = new RegExp(term, "gi");
                content = content.replace(regex, '<span class="highlight">' + term + '</span>');
                $(this).replaceWith(content);
            });
        });
    }
});