您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

如何使用JavaScript突出显示文本

如何使用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

"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,您应该参考innerHTML文档正文。

document.body.innerHTML

javascript 2022/1/1 18:19:43 有499人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶