JSFiddle - React, Tailwind, and code Playground

by SpaceDog

HTML

<div class="table">
  <div class="row" onclick="changeChannel(3);" data-searched="name">
    <span class="cell dimmable">
      <!--<img class="stationImg" src="images/logo1.jpg"><br>-->
      <div align="center" class="Channel">Channel 3<br>name</div>
    </span>
    <span class="cell_2hr">
      <span class="timeForShow dimmable">1:00p-3:00p<br></span>
      <span class="tvShowTitle dimmable">Golf:The Challenge<br></span>
      <span class="tvEpisodeTitle dimmable">&nbsp;</span>
    </span>
    <span class="cell_30min">
       <span class="timeForShow dimmable">3:00p-3:30p<br></span>
      <span class="tvShowTitle dimmable">News<br></span>
      <span class="tvEpisodeTitle dimmable">&nbsp;</span>
    </span>
  </div>
</div>

JavaScript

function searchAndHighlight(searchTerm, selector) {
    if(searchTerm) {
        var selector = selector || "body";
        var searchTermRegEx = new RegExp(searchTerm, 'ig');
        var matches = $(selector).text().match(searchTermRegEx);

        if(matches) {
          $('.highlightedSearched').removeClass('highlightedSearched');
            $(selector).html($(selector).html().replace(searchTermRegEx, "</span><span class='highlightedSearched dimmable'>"+searchTerm+"</span><span class='dimmable'>"));

            if($('.highlightedSearched:first').length) {
                
                $(".dimmable").each(function( index ) {
                    $(this).fadeTo( "slow" , 0.4, function() {
                        $(".highlightedSearched").each(function( index ) {
                            $(this).fadeTo("slow", 1);
                        });
                    });
                });
            }

            return true;
        }
    }
    return false;
}
searchAndHighlight("The");