JavaScript实现关键字高亮功能

高亮功能主要是指对页面中指定区域的指定文字进行高亮显示，也就是背景着色。一般在搜索结果页面会经常用到这个功能。

下面就为大家提供一种解决方案，用javascript实现。

首先在中引入下面javascript方法：

//
       ///    使用javascriptHTMLDOM高亮显示页面特定字词.
       ///    实例:
       ///        fHl(document.body,'纸伞|她');
       ///        这里的body是指高亮body里面的内容。
       ///        fHl(document.body,'希望|愁怨',false,'/');
       ///        fHl(document.getElementById('at_main'),'独自|飘过|悠长',true,'search.asp?keyword=');
       ///        这里的'at_main'是指高亮id='at_main'的div里面的内容。search.asp?keyword=指给关键字加的链接地址，
       ///        我这里加了一个参数，在后面要用到。可以是任意的地址。       
       ///
       ///
       ///    对象,要进行高亮显示的对象.
       ///
       ///
       ///    字符串,要进行高亮的词或多个词,使用竖杠(|)分隔多个词.
       ///
       ///
       ///    布尔值,是否随机显示文字背景色与文字颜色,true表示随机显示.
       ///
       ///
       ///    URI,是否对高亮的词添加链接.
       ///                       
       ///
       varbgCor=fgCor='';
       if(rndColor){
           bgCor=fRndCor(10,20);
           fgCor=fRndCor(230,255);
       }else{
           bgCor='#F0F';
           fgCor='black';
       }
       varre=newRegExp(flag,'i');
       for(vari=0;i$1');//这里是给关键字加链接，红色的$1是指上面链接地址后的具体参数。
           }else{
               str=text.replace(re,'$1');//不加链接时显示
           }
           o.innerHTML=str;
           returno;
       }
       //------------------------------------------------
       functionfRndCor(under,over){
           if(arguments.length==1){
               varover=under;
                   under=0;
           }elseif(arguments.length==0){
               varunder=0;
               varover=255;
           }
           varr=fRandomBy(under,over).toString(16);
               r=padNum(r,r,2);
           varg=fRandomBy(under,over).toString(16);
               g=padNum(g,g,2);
           varb=fRandomBy(under,over).toString(16);
               b=padNum(b,b,2);
               //defaultStatus=r+''+g+''+b
           return'#'+r+g+b;
           functionfRandomBy(under,over){
               switch(arguments.length){
                   case1:returnparseInt(Math.random()*under+1);
                   case2:returnparseInt(Math.random()*(over-under+1)+under);
                   default:return0;
               }
           }
           functionpadNum(str,num,len){
               vartemp=''
               for(vari=0;i

上面的fHl方法就是用来实现高亮的，参数的含义在注释中有写。

然后在页面最后调用fHl方法，对指定区域指定文字高亮着色，例如：

fHl(document.body,'高亮');  //对页面body的区域中的“高亮”文字背景着色

怎么样，很简单吧~