突出显示页面中存在的搜索文本

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 Plugin（jQuery 标记）来实现这一点。集成插件后，它很简单：

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

并且使用 css 类，您可以根据自己的喜好调整突出显示：

mark{
  background: orange;
  color: black;
}