JSFiddle - React, Tailwind, and code Playground

by ravi1989

HTML

<div class="searchContend_h">
    <div class="ui-grid-c" >
      <div class="ui-block-a">
        <input name="text-12" id="text-12" value="" type="text"  class="textSearchvalue_h">     
    </div>
    <div class="ui-block-b">
        <a href="#" data-role="button" data-corners="false"  data-inline="true" class="searchButtonClickText_h" >Search</a>
    </div>
    <div class="ui-block-c">
        <a href="#" data-role="button" data-corners="false"  data-inline="true" class="next_h">Next</a>
    </div>
    <div class="ui-block-d">
        <a href="#" data-role="button" data-corners="false" data-inline="true" class="previous_h">Previous</a>
    </div>
          
               <div id="realTimeContents">
                   dfdfsdmfjhjjdsjjdsjkjkaskakskkdsfjkdfjksjkdfsjkjkdfsjkdfsjkjkdfsjkdfjksjkdfsjkjkjkdfsfjkdfjksjkdfsjkjkdfsjkdfsjkjkdjkds  kfskdjfksd; k dl;kfs;kf ;ks;kf;k;lkkkklll;k
                   
                    dfdfsdmfjhjjdsjjdsjkjkaskakskkdsfjkdfjksjkdfsjkjkdfsjkdfsjkjkdfsjkdfjksjkdfsjkjkjkdfsfjkdfjksjkdfsjkjkdfsjkdfsjkjkdjkds  kfskdjfksd; k dl;kfs;kf ;ks;kf;k;lkkkklll;k
                    dfdfsdmfjhjjdsjjdsjkjkaskakskkdsfjkdfjksjkdfsjkjkdfsjkdfsjkjkdfsjkdfjksjkdfsjkjkjkdfsfjkdfjksjkdfsjkjkdfsjkdfsjkjkdjkds  kfskdjfksd; k dl;kfs;kf ;ks;kf;k;lkkkklll;k dfdfsdmfjhjjdsjjdsjkjkaskakskkdsfjkdfjksjkdfsjkjkdfsjkdfsjkjkdfsjkdfjksjkdfsjkjkjkdfsfjkdfjksjkdfsjkjkdfsjkdfsjkjkdjkds  kfskdjfksd; k dl;kfs;kf ;ks;kf;k;lkkkklll;k
                    dfdfsdmfjhjjdsjjdsjkjkaskakskkdsfjkdfjksjkdfsjkjkdfsjkdfsjkjkdfsjkdfjksjkdfsjkjkjkdfsfjkdfjksjkdfsjkjkdfsjkdfsjkjkdjkds  kfskdjfksd; k dl;kfs;kf ;ks;kf;k;lkkkklll;k
                   
                            </div>

</div>
</div>

CSS

.highlighted {
        background-color:yellow;
    }
   
    .highlight {
        background-color: #fff34d;
        -moz-border-radius: 5px; /* FF1+ */
        -webkit-border-radius: 5px; /* Saf3-4 */
        border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */
        -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* FF3.5+ */
        -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Saf3.0+, Chrome */
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Opera 10.5+, IE 9.0 */
    }

    .highlight {
        padding:1px 4px;
        margin:0 -4px;
    }

JavaScript

function searchAndHighlight(searchTerm, selector) {
    if(searchTerm) {
        //var wholeWordOnly = new RegExp("\\g"+searchTerm+"\\g","ig"); //matches whole word only
        //var anyCharacter = new RegExp("\\g["+searchTerm+"]\\g","ig"); //matches any word with any of search chars characters
        var selector = selector || "#realTimeContents";                             //use body as selector if none provided
        var searchTermRegEx = new RegExp(searchTerm,"ig");
        var matches = $(selector).text().match(searchTermRegEx);
        if(matches!=null&&matches.length>0) {
           $('.highlighted').removeClass('highlighted');     //Remove old search highlights
                $(selector).html($(selector).html().replace(searchTermRegEx, "<span class='match'>"+searchTerm+"</span>"));
           $('.match:first').addClass('highlighted');
            $('.next_h').on('click',i=1, function()
        {  
           
          
            $('.match').removeClass('highlighted');                                                                   
            $('.match').eq(i).addClass('highlighted');
       
          i=i+1; 
        k=i-2;
      
     }); 
                  $('.previous_h').on('click',k=1, function()
        {  

          if(matches.length>k&&k>0){
            $('.match').removeClass('highlighted');                                                                   
            $('.match').eq(k).addClass('highlighted');         
          k=k-1;
            i=k+2;

          }
     });
   
            
            
            
            if($('.highlighted:first').length) {             //if match found, scroll to where the first one appears
                $(window).scrollTop($('.highlighted:first').position().top);
            }
            return true;
        }
    }
    return false;
}

$(document).on('click', '.searchButtonClickText_h', function(event) {
 
   $(".highlighted").removeClass("highlighted").removeClass("match");
    ...