首頁 > web前端 > js教程 > 如何在 JavaScript 中反白顯示單一文字實例?

如何在 JavaScript 中反白顯示單一文字實例?

DDD
發布: 2024-12-04 11:16:09
原創
1141 人瀏覽過

How Can I Highlight a Single Instance of Text in JavaScript?

使用 JavaScript 突出顯示文字

突出顯示網頁上的特定文字可以增強使用者體驗並吸引人們對重要內容的注意。本示範重點在於單次突出顯示,這與搜尋功能中常用的識別文字所有實例的典型突出顯示效果不同。

jQuery 高亮效果

為了快速簡單的解決方案,可以使用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;
  }
}
登入後複製

Don'不要忘記為“突出顯示”添加相應的CSS樣式class:

.highlight {
  background-color: yellow;
}
登入後複製

使用範例

要突出顯示特定div 元素中的單字“fox”,只需呼叫突出顯示函數:

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

<div>
登入後複製

按一下按鈕將以黃色反白顯示第一次出現的「fox」。

以上是如何在 JavaScript 中反白顯示單一文字實例?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板