JavaScript でテキストの単一インスタンスを強調表示するにはどうすればよいですか?

JavaScript でテキストを強調表示

Web ページ上の特定のテキストを強調表示すると、ユーザー エクスペリエンスが向上し、重要なコンテンツに注意を引くことができます。このデモは、検索機能でよく使用される、テキストのすべてのインスタンスを識別する一般的なハイライト効果とは異なり、単一出現のハイライトに焦点を当てています。

jQuery Highlight Effect

迅速かつ簡単な解決策として、jQuery ハイライト効果を使用できます。

$(selector).highlight(text, options);

単純にテキストとハイライトのオプションを指定して、希望の結果を実現します。

カスタム JavaScript コード

生の JavaScript アプローチを希望する場合は、次のコード スニペットを検討してください:

function highlight(text) {
  // Get the target element
  var inputText = document.getElementById("inputText");

  // Extract the element's HTML content
  var innerHTML = inputText.innerHTML;

  // Locate the first occurrence of the text
  var index = innerHTML.indexOf(text);

  // Check if text is found
  if (index >= 0) { 
    // Inject highlight markup around the matching text
    innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>"
                + innerHTML.substring(index, index + text.length) + "</span>"
                + innerHTML.substring(index + text.length);

    // Update the element with highlighted text
    inputText.innerHTML = innerHTML;
  }
}

「ハイライト」に対応する CSS スタイルを追加することを忘れないでください。 class:

.highlight {
  background-color: yellow;
}

使用例

特定の div 要素内の単語「fox」を強調表示するには、単に強調表示関数を呼び出します:

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

<div>

ボタンをクリックすると、最初に出現した「fox」が黄色で強調表示されます。

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