：如何用jQuery突出顯示某些單詞

Question

我正在尋找一個腳本，可以根據它們的位置突出顯示特定數量的單詞。 例如，以下contentI要突出只有第二，第三和第四話：

<p> 
    Quisque bibendum sem ut lacus. Integer dolor ullamcorper libero. 
    Aliquam rhoncus eros at augue. Suspendisse vitae mauris. 
</p> 

的結果應該是這樣的：

<p> 
    Quisque <span class="highlight">bibendum sem ut</span> lacus. Integer dolor ullamcorper libero. 
    Aliquam rhoncus eros at augue. Suspendisse vitae mauris. 
</p> 

非常感謝您！

Answer 1

這jQuery插件是你在找什麼：

• jQuery Highlight

它正是你想要的，遍歷DOM TextNodes並查找文本進行搜索，當發現一次它創建一個span元素。

用法：

$('p').highlight('bibendum sem ut'); 

Answer 2

我寫道，用了jQuery遍歷包裝用.highlight類每個關鍵字的元素很簡單的功能。

function highlight_words(word, element) { 
    if(word) { 
     var textNodes; 
     word = word.replace(/\W/g, ''); 
     var str = word.split(" "); 
     $(str).each(function() { 
      var term = this; 
      var textNodes = $(element).contents().filter(function() { return this.nodeType === 3 }); 
      textNodes.each(function() { 
       var content = $(this).text(); 
       var regex = new RegExp(term, "gi"); 
       content = content.replace(regex, '<span class="highlight">' + term + '</span>'); 
       $(this).replaceWith(content); 
      }); 
     }); 
    } 
} 

更多信息：

http://www.hawkee.com/snippet/9854/