怎么实现搜索后（一次搜索），页面中所有的关键字高亮显示！

(javascript)
 
KeywordExtractor.extractHTML = function(html, query) {
    var re = new Array();
    for (var i = 0; i < query.length; i ++) {
        query[i] = query[i].toLowerCase();
        if (KeywordExtractor.exact)
            re.push(‘\\b’+query[i]+‘\\b’);
        else
            re.push(query[i]);
    }
 
    re = new RegExp(‘(’+re.join("|")+‘)’, "gi");
 
    var subs;
    if (navigator.userAgent.search(/Safari/) >= 0 || !KeywordExtractor.style_name_suffix) 
    {
        subs = ‘<span class="’+KeywordExtractor.style_name+
            (KeywordExtractor.style_name_suffix?‘1′:”)+‘">$1</span>’
    } else {
        var stylemapper = {};
        for (var i = 0; i < query.length; i ++)
            stylemapper[query[i]] = KeywordExtractor.style_name+(i+1);
        subs = function(match) {
            return ‘<span class="’+stylemapper[match.toLowerCase()]+‘">’+match+
                ‘</span>’;
        };
    }
 
    var last = 0;
    var tag = ‘<’;
    var skip = false;
    var skipre = new RegExp(‘^(script|style|textarea)’, ‘gi’);
    var part = null;
    var result = ”;
 
    while (last >= 0) {
        var pos = html.indexOf(tag, last);
        if (pos < 0) {
            part = html.substring(last);
            last = -1;
        } else {
            part = html.substring(last, pos);
            last = pos+1;
        }
 
        if (tag == ‘<’) {
            if (!skip)
                part = part.replace(re, subs);
            else
                skip = false;
        } else if (part.match(skipre)) {
            skip = true;
        }
 
        result += part + (pos < 0 ? ” : tag);
        tag = tag == ‘<’ ? ‘>’ : ‘<’;
    }
 
    return result;
};

解决方案 »

  1.   

    <html>   
      <head>   
      <meta   http-equiv='content-type'   content='text/html;   charset=gb2312'>   
      <title>highlightshow</title>   
      <style   type='text/css'>   
      body{font-family:'宋体';font-size:12pt;}td{font-family:'宋体';font-size:10.5pt;line-height:135%;}.p105{font-family:'宋体';color:blue;font-size:10.5pt;}.p9{color=FFFF00;font-size:9pt;}A{color:white;text-decoration:none;}A:Hover{color:black;text-decoration:none;}A:Active{color:black}   
      </style>   
      <script   language='JavaScript'>   
      var   NS4   =   (document.layers);   
      var   IE4   =   (document.all);   
      var   win   =   window;   
      var   n=0;   
      function   findInPage(str){   
      var   txt,i,found;   
      if(str==''){return   false;}   
      if(NS4){if(!win.find(str))   
      while(win.find(str,false,true))n++;else{n++;}if(n==0)alert('没有此报类');}   
      if(IE4){txt=win.document.body.createTextRange();   
      for(i=0;i<=n&&(found=txt.findText(str))!=false;i++){txt.pasteHTML("<b   style='background-color:#fff'>"+txt.text+"</b>");}   
      if(found)   
      {   
      txt.scrollIntoView();   
      n++;   
      }   
      else   
      {if(n>0){n=0;findInPage(str);}else{alert('没有此报类');}   
      }   
      }   
      return   false;   
      }   
      </script>   
      </head>   
      <body   bgcolor=3A6EA5>   
          <form   name='search'   onSubmit='return   findInPage(this.string.value);'>   
                      <input   name='string'   type='text'   size=8   onChange='n=0;'   style='font-family:宋体;font-size:9pt;background-color:008800;color:FFFFFF;border:   1   double'>   
                      <input   type='submit'   value='查找'   style='font-size:9pt;background-color:FF9900;color:FFFFFF;border:   1   double'>   
          </form>   
      <p>&nbsp;</p>   
          <p>事件源对象   <br/>   
      </p>   
      event.srcElement.tagName   event.srcElement.type   
      <p><br/>   
          捕获释放   <br/>   
      </p>   
      event.srcElement.setCapture();   event.srcElement.releaseCapture();   
      <p><br/>   
          事件按键   <br/>   
      </p>   
      event.keyCode   event.shiftKey   event.altKey   event.ctrlKey   
      </body>   
      </html>
      

  2.   

    1.var   range   =   document.body.createTextRange();   
      2.range.findText(keywords[i]),   keywords是存放关键字的数组   
      3.range.execCommand('ForeColor',   'false',   'highlighttext');   
      range.execCommand('BackColor',   'false',   'red');     
      

  3.   

    <html><body onload="hWord()"> 
        
    <script type="text/javascript">//将页面中的关键字高亮显示,在body的onload中使用
    function HighLight(nWord){
        var orange = document.body.createTextRange();    
            while(orange.findText(nWord)){
                orange.pasteHTML("<span style='color:red;'>" + orange.text + "</span>");
                orange.moveStart('character',1);            
        }    
    }//将页面中的关键字高亮显示,在body的onload中使用(支持多个关键字，多个关键字用空格分开)
    function highword(nWord)
    {
        //将全角空格(逗号)转半角空格
        nWord = nWord.replace(/\　/g,"|");    
        nWord = nWord.replace(/\,/g,"|");    
        nWord = nWord.replace(/\，/,"|");    
        nWord = nWord.replace(/\ /g,"|");
            
        var Arr = nWord.split("|");
        for(var i=0;i<Arr.length;i++){        
            HighLight(Arr[i]);
        }
    }function hWord(){ 
      highword("blog,测试,4");
    }
    </script>blog 04 测试 sasf测试dfasdfasd<br> 1a 04 
    </body>
    </html>