如何使用 JavaScript 來突顯網頁上出現的特定文字？

使用 JavaScript 來突出顯示文字

如何使用 JavaScript 選擇性地突出顯示網頁上的文字？這裡的變化是突出顯示文字的特定出現，而不是像標準搜尋功能那樣突出顯示每個實例。

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;
}

用法

建立HTML文件，貼上程式碼並包含輸入文字欄位：

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

<div><p>點擊「突出顯示」以黃色突出顯示第一次出現的「fox」。 </p></div>

以上是如何使用 JavaScript 來突顯網頁上出現的特定文字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！