JavaScript を使用して Web ページ上の特定のテキストを強調表示するにはどうすればよいですか?-jsチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2024-12-07 13:00:16

オリジナル

238 人が閲覧しました

How Can I Highlight a Specific Text Occurrence on a Web Page Using JavaScript?

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 サイトの他の関連記事を参照してください。