首页 > 其他 > 详细

前端--搜索结果对搜索关键词高亮效果

时间:2019-08-29 17:28:58      阅读:233      评论:0      收藏:0      [点我收藏+]

<!DOCTYPE html>
<html>
  <head>
    <title>hi</title>
  </head>
  <body>
    <div>
      <div class="hi"> a small test test small a hai hi</div>
    </div>
  </body>
<script>
  function highlightKeyworld(keywords){
    var array = keywords.split(" "); //分割
    var targetContent=document.getElementsByName(‘hi‘);
    for ( var t = 0; t < targetContent.length; t++) {
      for ( var i = 0; i < array.length; i++) {
      //创建表达式,匹配替换
      var reg = new RegExp("(" + array[i].replace(/,/, "|") + ")", "g");
      //替换重新写入
      targetContent[t].innerHTML =targetContent[t].innerHTML.replace(reg,"<font color=‘red‘>$1</font>");
      }
    }
  }
  highlightKeyworld("这是");
</script>
</html>

前端--搜索结果对搜索关键词高亮效果

原文:https://www.cnblogs.com/chelse/p/11430839.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!