JSFiddle - React, Tailwind, and code Playground

by timmah

HTML

<p>highlight</p>

<label for="filter-field">Filter the table:</label> <input id="filter-field" placeholder="Search" type="text">
<table id="lps-table" class="datatable" summary="Table displays Prohibited Imports and Exports (Drugs and Precursor Chemicals)">
	<thead>
		<tr>
			<th scope="col">Substance Name</th>
			<th scope="col">Synonym/Description</th>
			<th scope="col">Classification</th>
			<th scope="col">Import Permit Required</th>
			<th scope="col">Import Licence Required</th>
			<th scope="col">Export Licence and Permit Required</th>
			<th scope="col">Alternate Contact</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td scope="row">Abortifacients</td>
			<td>that is substances that purport to produce abortion</td>
			<td>&nbsp;</td>
			<td>Yes</td>
			<td>No</td>
			<td>No</td>
			<td>TGA</td>
		</tr>
		<tr>
			<td scope="row">Acetic anhydride</td>
			<td>in solutions, mixtures containing at least 90%</td>
			<td>Precursor</td>
			<td>No</td>
			<td>No</td>
			<td>Yes*</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td scope="row">Acetone</td>
			<td>neat and in mixtures at a concentration of a least 90%</td>
			<td>Precursor</td>
			<td>No</td>
			<td>No</td>
			<td>Yes*</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td scope="row">Acetorphine</td>
			<td>&nbsp;</td>
			<td>Narcotic</td>
			<td>Yes</td>
			<td>Yes</td>
			<td>Yes</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td scope="row">Acetyl-alpha-methylfentanyl</td>
			<td>&nbsp;</td>
			<td>Narcotic</td>
			<td>Yes</td>
			<td>Yes</td>
			<td>Yes</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td scope="row">N-acetylanthranilic acid</td>
			<td>&nbsp;</td>
			<td>Precursor</td>
			<td>Yes</td>
			<td>Yes</td>
			<td>Yes</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td scope="row">Acetylcodeine</td>
			<td>&nbsp;</td>
			<td>Narcotic</td>
			<td>Yes</td>
			<td>Yes</td>
			<td>No</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td...

CSS

th,td {
    border:solid 1px black;
}
th {
    background-color:#CCC;
}
.highlight {
    background-color:yellow;
}

JavaScript

//
// jQuery highlight plugin: https://github.com/bartaz/sandbox.js/blob/master/jquery.highlight.js
//

jQuery.extend({
    highlight: function (node, re, nodeName, className) {
        if (node.nodeType === 3) {
            var match = node.data.match(re);
            if (match) {
                var highlight = document.createElement(nodeName || 'span');
                highlight.className = className || 'highlight';
                var wordNode = node.splitText(match.index);
                wordNode.splitText(match[0].length);
                var wordClone = wordNode.cloneNode(true);
                highlight.appendChild(wordClone);
                wordNode.parentNode.replaceChild(highlight, wordNode);
                return 1; //skip added node in parent
            }
        } else if ((node.nodeType === 1 && node.childNodes) && // only element nodes that have children
                !/(script|style)/i.test(node.tagName) && // ignore script and style nodes
                !(node.tagName === nodeName.toUpperCase() && node.className === className)) { // skip if already highlighted
            for (var i = 0; i < node.childNodes.length; i++) {
                i += jQuery.highlight(node.childNodes[i], re, nodeName, className);
            }
        }
        return 0;
    }
});

jQuery.fn.unhighlight = function (options) {
    var settings = { className: 'highlight', element: 'span' };
    jQuery.extend(settings, options);

    return this.find(settings.element + "." + settings.className).each(function () {
        var parent = this.parentNode;
        parent.replaceChild(this.firstChild, this);
        parent.normalize();
    }).end();
};

jQuery.fn.highlight = function (words, options) {
    var settings = { className: 'highlight', element: 'span', caseSensitive: false, wordsOnly: false };
    jQuery.extend(settings, options);
    
    if (words.constructor === String) {
        words = [words];
    }
    words = jQuery.grep(words, function(word, i){
     ...