如何使用 JavaScript 突出显示网页上出现的特定文本？-js教程-PHP中文网

如何使用 JavaScript 突出显示网页上出现的特定文本？

Mary-Kate Olsen

发布： 2024-12-07 13:00:16

原创

239 人浏览过

How Can I Highlight a Specific Text Occurrence on a Web Page Using 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>

登录后复制

单击“突出显示”以黄色突出显示第一次出现的“fox”。

以上是如何使用 JavaScript 突出显示网页上出现的特定文本？的详细内容。更多信息请关注PHP中文网其他相关文章！