如何使用JavaScript突出显示文本

  • Z时代
  • 2024-01-10
  • 分类：问答

有人可以通过可以在网页上突出显示文本的JavaScript函数来帮助我。要求是-仅突出显示一次，而不是像我们在搜索情况下那样突出显示所有出现的文本。

回答：

您可以使用jquery 突出显示效果。

但是，如果您对原始javascript代码感兴趣，请看一下我得到的内容。将复制粘贴到HTML中，打开文件，然后单击“突出显示”-这应该突出显示“

fox”一词。在性能方面，我认为这适用于小文本和单个重复（如您指定的那样）

function highlight(text) {
  var inputText = document.getElementById("inputText");
  var innerHTML = inputText.innerHTML;
  var 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;
  }
}
.highlight {
  background-color: yellow;
}
<button onclick="highlight('fox')">Highlight</button>
<div id="inputText">
  The fox went over the fence
</div>

编辑：

使用 replace

我看到这个答案越来越受欢迎，我想我可以补充一下。您也可以轻松使用replace

"the fox jumped over the fence".replace(/fox/,"<span>fox</span>");

或者对于多次出现（与问题无关，但在注释中被询问），您只需添加global替换正则表达式即可。

"the fox jumped over the other fox".replace(/fox/g,"<span>fox</span>");

希望这对感兴趣的评论者有所帮助。

将HTML替换为整个网页

要替换整个网页的HTML，您应该参考innerHTML文档正文。

document.body.innerHTML

以上是 如何使用JavaScript突出显示文本 的全部内容， 来源链接： utcz.com/qa/413128.html

回到顶部