highlighting the searched text that is present in page

Question

i have a search boxand on entering values into that, all the matching text words will be displayed on the page but i want to highlight them also. Please help.

    $(function() {
        var tabLinks = $('.nav > li'),
            tabsContent = $('.tab-content > div'),
            tabContent = [],
            string,
            i,
            j;
        
        for (i = 0; i < tabsContent.length; i++) {
            tabContent[i] = tabsContent.eq(i).text().toLowerCase();
        }
        $('input').on('input', function() {
            string = $(this).val().toLowerCase();
            for (j = 0; j < tabsContent.length; j++) {
                if (tabContent[j].indexOf(string) > -1) {
                     console.log(tabLinks.eq(j).find('a'));
                     tabLinks.eq(j).show();
                     tabLinks.eq(j).find('a').tab('show');
                } else {
                     tabLinks.eq(j).hide();
                  } 
              }
          });

       })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text-center" style="float:right;">
                <input type="text" class="form-control" placeholder="Search..."/>
            </div>

What exactly do you want to highlight? The whole words/ search results or search query within the word? — definaly, Jun 25 '19 at 11:55
Possible duplicate of [How to highlight text using javascript](https://stackoverflow.com/questions/8644428/how-to-highlight-text-using-javascript) — MoshMage, Jun 25 '19 at 13:15

score 0 · Answer 1 · answered Jun 25 '19 at 13:11

I used this jQuery Plugin (jQuery mark) to accomplish that. After you integrated the Plugin its as easy as :

if(MyKeywordArray.length > 0) {
  // select Element where you want to mark the keywords
  $('.markable').mark(MyKeywordArray);
}

And with the css class you can adjust the highlighting to your liking:

mark{
  background: orange;
  color: black;
}

highlighting the searched text that is present in page

1 Answers1