выделение искомого текста, присутствующего на странице

Question

У меня есть окно поиска, и при вводе значений в него все соответствующие текстовые слова будут отображаться на странице, но я также хочу выделить их.Пожалуйста, помогите.

    $(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>

Answer 1

Я использовал этот плагин jQuery (знак jQuery) для этого.После того, как вы интегрировали плагин, его так просто:

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

И с классом css вы можете настроить подсветку по своему вкусу:

mark{
  background: orange;
  color: black;
}