ホームページ >ウェブフロントエンド >jsチュートリアル >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 サイトの他の関連記事を参照してください。