JavaScript を使用して Web ページ上の特定のテキストを強調表示するにはどうすればよいですか?

JavaScript を使用したテキストの強調表示

JavaScript を使用して Web ページ上のテキストを選択的に強調表示するにはどうすればよいですか?ここでの工夫は、標準の検索機能のようにすべてのインスタンスを強調表示するのではなく、テキストの特定の出現箇所を強調表示することです。

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

使用法

HTML ファイルを作成し、コードを貼り付け、入力テキストを含めますフィールド:

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

<div>

[ハイライト] をクリックして、最初に出現した「fox」を黄色でハイライトします。

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