您可以使用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 >" + 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



