JSFiddle - React, Tailwind, and code Playground

by Evan Sharp

HTML

<div id="grdScrubResults" class="t-widget t-grid"><table cellspacing="0"><colgroup><col><col><col><col><col><col><col><col><col style="width:100px"></colgroup><thead class="t-grid-header"><tr><th scope="col" class="t-header"><a href="/PdfDocumentPageLine?orderBy=Reviewed-asc" class="t-link">Reviewed</a><div class="t-grid-filter t-state-default"><span class="t-icon t-filter">Filter</span></div></th><th scope="col" class="t-header"><a href="/PdfDocumentPageLine?orderBy=PageNum-asc" class="t-link">Page Num</a><div class="t-grid-filter t-state-default"><span class="t-icon t-filter">Filter</span></div></th><th scope="col" class="t-header"><a href="/PdfDocumentPageLine?orderBy=Paragraph-asc" class="t-link">Paragraph</a><div class="t-grid-filter t-state-default"><span class="t-icon t-filter">Filter</span></div></th><th scope="col" class="t-header"><a href="/PdfDocumentPageLine?orderBy=Flow-asc" class="t-link">Flow</a><div class="t-grid-filter t-state-default"><span class="t-icon t-filter">Filter</span></div></th><th scope="col" class="t-header"><a href="/PdfDocumentPageLine?orderBy=Line-asc" class="t-link">Line</a><div class="t-grid-filter t-state-default"><span class="t-icon t-filter">Filter</span></div></th><th scope="col" class="t-header"><a href="/PdfDocumentPageLine?orderBy=LineText-asc" class="t-link">Line Text</a><div class="t-grid-filter t-state-default"><span class="t-icon t-filter">Filter</span></div></th><th scope="col" class="t-header"><a href="/PdfDocumentPageLine?orderBy=PdfDocument.Name-asc" class="t-link">Document</a><div class="t-grid-filter t-state-default"><span class="t-icon t-filter">Filter</span></div></th><th scope="col" class="t-header"><a href="/PdfDocumentPageLine?orderBy=Note-asc" class="t-link">Note</a><div class="t-grid-filter t-state-default"><span class="t-icon t-filter">Filter</span></div></th><th scope="col" class="t-header"><span class="t-link">&nbsp;</span></th></tr></thead><tbody><tr><td><input type="checkbox" disabled="disabled"...

CSS

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

JavaScript

(function( $ ){

  $.fn.highlightText= function( words ) {  
    var phrase = words.replace(/^\s+|\s+$/g, "");          
    phrase = phrase.replace(/,\s*/g, "|");
    phrase = ["\\b(", phrase, ")"].join("");
      return this.find("tr").each(function(){
          $(this).find("td").eq(5).addClass("Testing").each(function(i, v) {
      var block = $(v);
      block.html(
        block.text().replace(
          new RegExp(phrase, "gi"),
          function(match) {
            return ["<span class='highlight'>", match, "</span>"].join("");
          }));
    
    });
      });

  };
})( jQuery );

$(function(){
    $("#grdScrubResults").highlightText("paint, INTERIOR");
});