【jQuery】特定の文字列をHTMLタグで囲む方法

Web開発において、特定の文字列を見つけてスタイリッシュに強調表示することは一般的なニーズです。jQueryを利用すると、このタスクを簡単に実現できます。本記事では、特定の文字列を見つけ、それをHTMLタグで囲んで目立たせる方法に焦点を当てます。

HTML

対象となるテキストが表示される要素を作成します。例として、

要素を使用します。

<p id="targetText">This is a sample text with the word 'example'.</p>

jQuery

次に、jQueryを使って特定の文字列を見つけ、それをHTMLタグで囲むスクリプトを作成します。

<script>
  $(document).ready(function() {
    var targetText = $('#targetText');
    var text = targetText.text();
    var newText = text.replace(/(example)/g, '<span class="highlight">$1</span>');
    targetText.html(newText);
  });
</script>

この例では、exampleという文字列を見つけ、それを<span class=”highlight”>で囲んでいます。highlightクラスは、この文字列を目立たせるためのスタイルを指定します。

CSS（オプション）

スタイリングが必要な場合は、CSSで適切なスタイルを追加します。

.highlight {
  background-color: yellow;
  font-weight: bold;
}

まとめ

これで、指定した文字列が目立つようにHTMLタグで囲まれ、適用されたスタイルが反映されます。この方法を利用することで、Webページ上で特定のテキストを強調表示することが簡単になります。

以上で、jQueryを使用して文字列をHTMLタグで囲む手順が完了しました。この方法を活用して、ウェブページのユーザーエクスペリエンスを向上させましょう。