如何在 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中文网其他相关文章！