js+正文规则 高亮搜索关键字

采用的:
 function HighlightText(obj,keyword) 
 {
 if(document.referrer){
   var reg=new RegExp(keyword,"g"); //创建正则RegExp对象
   var regdx=keyword;
   var data=document.getElementById(obj).innerHTML;//替换范围获取源代码
   document.getElementById(obj).innerHTML=data.replace(reg,'<span class="cC30">'+regdx+'</span>');//根据正则表达式替换
   var reg=new RegExp(keyword.toLowerCase(),"g"); //创建正则RegExp对象
   var regdx=keyword.toLowerCase();
   var data=document.getElementById(obj).innerHTML;//替换范围获取源代码
   document.getElementById(obj).innerHTML=data.replace(reg,'<span class="cC30">'+regdx+'</span>');//根据正则表达式替换
   var reg=new RegExp(keyword.toUpperCase(),"g"); //创建正则RegExp对象 
   var regdx=keyword.toUpperCase();
   var data=document.getElementById(obj).innerHTML;//替换范围获取源代码
   document.getElementById(obj).innerHTML=data.replace(reg,'<span class="cC30">'+regdx+'</span>');//根据正则表达式替换
   }
 } 
window.onload=function(){HighlightText('news','123');};

网络资源:

  • <script type="text/javascript" >
  • <!--
  • // 说明:获取搜索引擎关键字高亮 显示
  • // 整理:http://www.CodeBit.cn
  •  
  • /* http://www.kryogenix.org/code/browser/searchhi/ */
  • /* Modified 20021006 to fix query string parsing and add case insensitivity */
  • function highlightWord( node,word) {
  • // Iterate into this nodes childNodes
  • if ( node.hasChildNodes ) {
  • var hi_cn;
  • for ( hi_cn=0 ;hi_cn<node.childNodes .length ;hi_cn++) {
  • highlightWord( node.childNodes [ hi_cn] ,word) ;
  • }
  • }
  • // And do this node itself
  • if ( node.nodeType == 3 ) { // text node
  • tempNodeVal = node.nodeValue .toLowerCase ( ) ;
  • tempWordVal = word.toLowerCase ( ) ;
  • if ( tempNodeVal.indexOf ( tempWordVal) != -1 ) {
  • pn = node.parentNode ;
  • if ( pn.className != "searchword" ) {
  • // word has not already been highlighted!
  • nv = node.nodeValue ;
  • ni = tempNodeVal.indexOf ( tempWordVal) ;
  • // Create a load of replacement nodes
  • before = document.createTextNode ( nv.substr ( 0 ,ni) ) ;
  • docWordVal = nv.substr ( ni,word.length ) ;
  • after = document.createTextNode ( nv.substr ( ni+word.length ) ) ;
  • hiwordtext = document.createTextNode ( docWordVal) ;
  • hiword = document.createElement ( "span" ) ;
  • hiword.className = "searchword" ;
  • hiword.appendChild ( hiwordtext) ;
  • pn.insertBefore ( before,node) ;
  • pn.insertBefore ( hiword,node) ;
  • pn.insertBefore ( after,node) ;
  • pn.removeChild ( node) ;
  • }
  • }
  • }
  • }
  •  
  • function googleSearchHighlight( ) {
  • if ( !document.createElement ) return ;
  • ref = document.referrer ;
  • if ( ref.indexOf ( '?' ) == -1 ) return ;
  • qs = ref.substr ( ref.indexOf ( '?' ) +1 ) ;
  • qsa = qs.split ( '&' ) ;
  • for ( i=0 ;i<qsa.length ;i++) {
  • qsip = qsa[ i] .split ( '=' ) ;
  • if ( qsip.length == 1 ) continue ;
  • if ( qsip[ 0 ] == 'q' || qsip[ 0 ] == 'p' ) { // q= for Google, p= for Yahoo
  • words = unescape( decodeURIComponent( qsip[ 1 ] .replace ( //+/g ,' ' ) ) ) .split ( //s+/ ) ;
  • for ( w=0 ;w<words.length ;w++) {
  • highlightWord( document.getElementsByTagName ( "body" ) [ 0 ] ,words[ w] ) ;
  • }
  • }
  • }
  • }
  •  
  • window.onload = googleSearchHighlight;
  •  
  • //-->
  • </script>
  • javascript控制关键字高亮显示

    function SearchHighlight(mytag)  {
        
    if  ( ! document.createElement)
        
    {
            
    return ;
        }

        var q 
    =   " {{$q}} " ; // 要高亮显示的关键字
        var l  =  document.getElementsByTagName(mytag);
        
    if ( ""   ==  q)  return ;
        words 
    =  unescape(q.replace( /+/ g, '   ' )).split( / s +/ );
        
    for  (w = 0 ;w < words.length;w ++ {
            
    for (i = 0 ;i < l.length;i ++ )
            
    {
                var pa 
    =   new  RegExp( " ( " + words[w] + " ) " , " ig " );
                
    if (l.parentNode.parentNode.parentNode.id  !=   " header " ) // 标题中的内容不替换
                l.innerHTML  =  l.innerHTML.replace(pa, " <span class= " searchword " >$1</span> " );
            }

        }

    }


    1、正则表达式
    2、向后引用
    调用方法:
    document.onload = SearchHighlight(”a”);//要搜索的标签名称,这里的意思是凡是形如<a></a>的标记中的内容,包含关 键字的时候均高亮显示。然后把下面的CSS定义加到你的CSS文件里或者直接加到HTML文件中
    .searchword{background-color:yellow;}
    那么所有的关键字(不论大小写)将显示为黄色背景。


    有待分析!


    原文地址:https://www.cnblogs.com/y0umer/p/3839389.html