突出顯示頁面中顯示的搜索文本

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;
}