jQuery を使用してテキスト内の特定の単語を強調表示するにはどうすればよいですか?

jQuery で単語を強調表示する

質問:

テキスト ブロック内の特定の単語を強調表示します。たとえば、次のテキストで「dolor」を強調表示します:

<p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>
<p>
    Quisque bibendum sem ut lacus. Integer dolor ullamcorper libero.
    Aliquam rhoncus eros at augue. Suspendisse vitae mauris.
</p>

期待される結果:

<p>
    Lorem ipsum <span class="myClass">dolor</span> sit amet, consectetuer adipiscing elit.
</p>
<p>
    Quisque bibendum sem ut lacus. Integer <span class="myClass">dolor</span> ullamcorper
    libero. Aliquam rhoncus eros at augue. Suspendisse vitae mauris.
</p>

jQuery Solution:

はい、jQuery を使用してこの効果を実現できます。次のコード スニペットは、解決策を提供します。

$.fn.highlight = function(word) {
  var pattern = word.replace(/[-[\]{}()*+?.,\^$|#\s]/g, "\$&"");
  return this.each(function() {
    $(this).html($(this).html().replace(new RegExp("(" + pattern + ")", "gi"), "<span class='highlight'>$&amp;</span>"));
  });
};

$("p").highlight("dolor");

説明:

1. $.fn.highlight は、単語を文字列として受け取るカスタム jQuery 関数です。
2. パターン変数は、パラメータ内の特殊文字をエスケープすることで正規表現パターンを作成します。 word.
3. each 関数は、一致したすべての要素 (この場合は段落タグ) を反復処理し、単語の出現箇所をその単語を囲む タグで置き換えます。
4. 最後に、 $("p").highlight("dolor") 行はカスタム関数を呼び出し、「dolor」を単語として渡します。

注:

他にも多数の jQuery ベースのソリューションや外部プラグインが利用可能で、特定のニーズに応え、追加機能を提供します。これらのオプションを検討して、要件に最適なものを見つけてください。

以上がjQuery を使用してテキスト内の特定の単語を強調表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。