JavaScript を使用して 1 回限りのテキスト強調表示効果を作成するにはどうすればよいですか?

JavaScript を使用したテキストの強調表示: 1 回限りのスポットライト

Web ページ内のテキストを強調表示する場合、デフォルトに頼ることがよくあります。ブラウザの機能。ただし、正確な 1 回限りのハイライト効果が必要な場合はどうすればよいでしょうか? JavaScript を使用してこれを実現する方法は次のとおりです。

jQuery ハイライト効果は、テキスト ハイライトの簡単なソリューションを提供します。ただし、生の JavaScript アプローチを求めている場合は、次のコード スニペットを検討してください:

function highlight(text) {
  const inputText = document.getElementById("inputText");
  const innerHTML = inputText.innerHTML;
  const index = innerHTML.indexOf(text);

  if (index >= 0) {
    innerHTML =
      innerHTML.substring(0, index) +
      `<span class="highlight">` +
      innerHTML.substring(index, index + text.length) +
      `</span>` +
      innerHTML.substring(index + text.length);
    inputText.innerHTML = innerHTML;
  }
}

強調表示効果を強調表示したいテキストと一致させるために、いくつかの CSS ルールを適用します:

.highlight {
  background-color: yellow;
}

それでは、すべてをまとめてみましょう。強調表示を行う場所に、ID「inputText」を持つ HTML 要素を作成します。また、「ハイライト」関数をトリガーする onclick イベントを持つボタンも追加します。

<button onclick="highlight('fox')">Highlight</button>

<div>
<p>「ハイライト」ボタンをクリックすると、JavaScript コードはテキスト内で最初に出現する「fox」を見つけて囲みます。 <span> 内にあるクラス「ハイライト」の要素。このスパン要素は黄色の背景色を適用し、「キツネ」のテキストを目立たせます。</span></p>
<p>このコード サンプルは、Web ページ内のテキストを強調表示するためのシンプルかつ効果的な方法を提供します。必要に応じて、検索テキストをカスタマイズしたり、色を強調表示したり、機能を拡張して複数の出現箇所を強調表示したりできます。</p>
</div>

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