JavaScript はどのようにして Web ページ上のテキストの 1 つのインスタンスだけを強調表示できるのでしょうか?

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

この質問では、Web ページ上のテキストを強調表示できる JavaScript 関数を求めますが、強調表示のみを行うという特定の要件があります。テキストの 1 回の出現。提供されたソリューションを詳しく調べて、この機能を実装する方法を検討してみましょう。

jQuery ハイライト効果

回答者は、このタスクに jQuery ハイライト効果を利用することを提案しています。ただし、提供されたコードは、正確な強調表示を可能にする生の JavaScript 実装を示しています。

JavaScript 実装

特定のテキストを強調表示するには、JavaScript コードはテキストを識別して初期化します。ページ内の要素。次に、要素の内部 HTML 内でターゲット テキストを検索します。見つかった場合、コードはターゲット テキストの周囲に「ハイライト」クラスを持つスパン要素を動的に作成します。このスパン要素はページに再度挿入され、ターゲット テキストをラップし、目的の強調表示スタイルを適用します。

使用法と注意事項

提供されたコードを使用するには、 JavaScript と CSS スニペットを HTML ドキュメントに組み込む必要があります。 onclick="highlight('fox')" 属性を持つ button 要素をクリックすると、コードは "inputText" div 内で最初に出現した単語 "fox" を見つけて強調表示します。

注目に値します。このアプローチは、テキスト サイズが小さく、テキストが 1 つ出現する場合に適していることがわかります。より広範な強調表示要件の場合は、より包括的なソリューションを活用するか、代替手法を検討する方が良い場合があります。

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