如何在 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> <p>按一下按鈕將以黃色反白顯示第一次出現的「fox」。 </p>
</div>

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