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

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

Web ページ上のテキストの強調表示は、重要な情報を強調したり、特定のコンテンツに注意を向けたりするのに便利な機能です。さまざまな手法が存在しますが、この記事では単純な JavaScript 実装について説明します。

コード スニペット:

提供されている JavaScript 関数、highlight() は、最初に出現した要素を効果的に強調表示します。指定された HTML 要素 (段落など) 内の指定されたテキスト。その仕組みは次のとおりです。

1. この関数は、強調表示される部分文字列として 1 つの引数 (テキスト) を受け取ります。
2. ID が「inputText」の HTML 要素から入力テキストを取得します。 ".
3. 入力テキスト内でテキストが出現する位置のインデックスを計算します。
4. テキストが見つかった場合、見つかったインスタンスを「」でラップします。 CSS セクションで定義されている「ハイライト」クラスを含む要素。

使用例:

この関数を利用するには、JavaScript コードをHTML ドキュメントを作成し、onClick イベントをボタンまたはリンクに添付します。クリックすると、イベントによって関数呼び出しがトリガーされ、強調表示されるテキストがパラメーターとして渡されます。例:

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

この例では、ボタンをクリックすると、「inputText」要素内で最初に出現した単語「fox」が強調表示されます。

CSS カスタマイズ:

CSS の「ハイライト」クラスのスタイルをオーバーライドすることで、ハイライトされた外観をさらにカスタマイズできます。指定された例では、強調表示されたテキストに黄色の背景色が適用されていますが、デザインのニーズに合わせて調整できます。

これらのテクニックを適用すると、Web ページ上の特定のテキストを簡単に強調表示でき、ユーザーはすばやく重要な情報を見つけて集中します。

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