javascript搜索关键字高亮效果

日期: 2022-12-08 13:45:02 分类: 前端浏览量：留言数： 98545

本章节分享一段代码实例，它实现了使用javascript将搜索关键字设置为高亮效果。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<script type="text/javascript">
function fHl(o, flag, rndColor, url){
  var bgCor=fgCor='';
  if(rndColor){
    bgCor=fRndCor(10, 20);
    fgCor=fRndCor(230, 255);
  }
  else {
    bgCor='#F0F';
    fgCor='black';
  }
  var re=new RegExp(flag, 'i');
  for(var i=0; i<o.childNodes.length; i++){
    var o_=o.childNodes[i];
    var o_p=o_.parentNode;
    if(o_.nodeType==1) {
      fHl(o_, flag, rndColor, url);
    }
    else if (o_.nodeType == 3) {
      if(!(o_p.nodeName=='A')){
        if(o_.data.search(re)==-1) continue;
        var temp=fEleA(o_.data, flag);
        o_p.replaceChild(temp, o_);
      }
    }
  }
 
  function fEleA(text, flag){
    var style=' style="background-color:'+bgCor+';color:'+fgCor+';" '
    var o=document.createElement('span');
    var str='';
    var re=new RegExp('('+flag+')', 'gi');
    if(url){
      str=text.replace(re, '<a href="'+url+
      '$1"'+style+'>$1</a>'); //这里是给关键字加链接，红色的$1是指上面链接地址后的具体参数。
    }
    else {
      str=text.replace(re, '<span '+style+'>$1</span>'); //不加链接时显示
    }
    o.innerHTML=str;
    return o;
  }
 
  function fRndCor(under, over){
    if(arguments.length==1){
      var over=under;
      under=0;
    }
    else if (arguments.length == 0) {
      var under=0;
      var over=255;
    }
    var r=fRandomBy(under, over).toString(16);
    r=padNum(r, r, 2);
    var g=fRandomBy(under, over).toString(16);
    g=padNum(g, g, 2);
    var b=fRandomBy(under, over).toString(16);
    b=padNum(b, b, 2);
 
    return '#' + r + g + b;
    function fRandomBy(under, over){
      switch(arguments.length){
        case 1: return parseInt(Math.random()*under+1);
        case 2: return parseInt(Math.random()*(over-under+1) + under);
        default: return 0;
      }
    }
    function padNum(str, num, len){
      var temp=''
      for(var i=0; i<len;temp+=num, i++);
      return temp=(temp+=str).substr(temp.length-len);
    }
  }
}
window.onload = function () {
  fHl(document.body, '犀牛前端部落');
}
</script>
</head>
<body>
犀牛前端部落欢迎您，本站的url地址是www.pipipi.net
</body>
</html>

javascript搜索关键字高亮效果，这样的场景在实际项目中还是用的比较多的，关于javascript搜索关键字高亮效果就介绍到这了。

javascript搜索关键字高亮效果属于前端实例代码，有关更多实例代码大家可以查看。