ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript を使用して 1 回限りのテキスト強調表示効果を作成するにはどうすればよいですか?

JavaScript を使用して 1 回限りのテキスト強調表示効果を作成するにはどうすればよいですか?

Barbara Streisand
リリース: 2024-12-04 17:15:12
オリジナル
595 人が閲覧しました

How Can I Create a One-Time Text Highlighting Effect with JavaScript?

JavaScript を使用したテキストの強調表示: 1 回限りのスポットライト

Web ページ内のテキストを強調表示する場合、デフォルトに頼ることがよくあります。ブラウザの機能。ただし、正確な 1 回限りのハイライト効果が必要な場合はどうすればよいでしょうか? 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;
}
ログイン後にコピー

それでは、すべてをまとめてみましょう。強調表示を行う場所に、ID「inputText」を持つ HTML 要素を作成します。また、「ハイライト」関数をトリガーする onclick イベントを持つボタンも追加します。

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

<div>
ログイン後にコピー

「ハイライト」ボタンをクリックすると、JavaScript コードはテキスト内で最初に出現する「fox」を見つけて囲みます。 内にあるクラス「ハイライト」の要素。このスパン要素は黄色の背景色を適用し、「キツネ」のテキストを目立たせます。

このコード サンプルは、Web ページ内のテキストを強調表示するためのシンプルかつ効果的な方法を提供します。必要に応じて、検索テキストをカスタマイズしたり、色を強調表示したり、機能を拡張して複数の出現箇所を強調表示したりできます。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート