javascript - 如何使用javascript突出显示文本

Question

谁能帮我实现一个可以在网页上突出显示文本的 javascript 函数。要求是 - 仅突出显示一次，而不是像我们在搜索时那样突出显示所有出现的文本。

Answer 1

您可以使用 jquery highlight effect .

但如果您对原始 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

我看到这个答案获得了一些人气，我想我可以补充一下。您也可以轻松使用替换

"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