：jQueryで特定の単語をハイライトする方法

Question

私は、その位置に応じて特定の数の単語を強調表示するよりもスクリプトを探しています。 たとえば、次のようcontentIのためにのみ、第2、第3、第4の単語を強調したい：

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

はどうもありがとうございました！それが見つけたとき、

それはあなたがしたいんまさに
• jQuery Highlight

は、DOM TextNodesを横断して、テキストを検索するためになります。

Answer 1

このjQueryプラグインは、あなたが探しているものです1回発生すると、span要素が作成されます。

使用法：

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

Answer 2

私は.highlightクラスで各キーワードを包むの要素を反復処理するためのjQueryを使用して非常に単純な関数を書きました。

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/