谁能帮我实现一个可以在网页上突出显示文本的 javascript 函数。 要求是 - 仅突出显示一次,而不是像我们在搜索时那样突出显示所有出现的文本。
最佳答案
您可以使用 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
关于javascript - 如何使用javascript突出显示文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56401394/