利用搜索引擎引用来高亮页面关键字

  当我们在使用大多数的网页搜索引擎的"网页快照"功能时,他们都会在返回的快照页面中加入关键字高亮的功能。这将非常方便我们查找网页中被检索的内容,其中google快照的关键字高亮还融入了分词功能,不同的词着以不同的颜色。可是由于%!#^*&$!的原因,google的网页快照非常的不稳定,那么我们就自己来加上这个关键字高亮功能吧。

    如下图,当我们在google中搜索了关键字:apache asp.net后的结果:
   利用搜索引擎引用来高亮页面关键字

    点击结果的连接并导航到我们自己的页面后,如果我们加以如下关键字高亮,是否会对用户快速查找和定位页面感兴趣的内容,提供方便呢?
    利用搜索引擎引用来高亮页面关键字
    
    按么我们来仔细的看看,可是IE中的地址明明是:http://birdshome.cnblogs.com/archive/2005/11/17/Apache.html,那么怎么能在页面中高亮由搜索引擎检索的关键字呢?这里我们是利用了document的referrer属性来获取搜索引擎类型和关键字信息的。比如上例中,document.referrer属性就为:http://www.google.com/search?hl=zh-CN&newwindow=1&q=apache+asp.net&btnG=%E6%90%9C%E7%B4%A2&lr=lang_zh-CN%7Clang_zh-TW。我们通过JavaScript分析出指定搜索引擎的关键字,再操作页面DOM对象就实现了高亮的功能。不过对于较长的连续中文关键字,这种客户端高亮方案是不可能提供分词功能的,也算是美中不足了。

    具体实现当前页面被检索关键字高亮的代码如下,放入页面的document.body.onload事件中调用就行了:)
利用搜索引擎引用来高亮页面关键字function FriendlyDisplayForSearch()
利用搜索引擎引用来高亮页面关键字利用搜索引擎引用来高亮页面关键字利用搜索引擎引用来高亮页面关键字{
利用搜索引擎引用来高亮页面关键字    var url = new UrlBuilder(document.referrer);
利用搜索引擎引用来高亮页面关键字    if ( url.m_Success )
利用搜索引擎引用来高亮页面关键字利用搜索引擎引用来高亮页面关键字    利用搜索引擎引用来高亮页面关键字{
利用搜索引擎引用来高亮页面关键字         var host = url.m_Host.toLowerCase();
利用搜索引擎引用来高亮页面关键字         if ( host.indexOf('.google.') != -1 )
利用搜索引擎引用来高亮页面关键字利用搜索引擎引用来高亮页面关键字         利用搜索引擎引用来高亮页面关键字{
利用搜索引擎引用来高亮页面关键字             var keywords = url.GetValue('q', 'UTF8');
利用搜索引擎引用来高亮页面关键字             if ( keywords )
利用搜索引擎引用来高亮页面关键字利用搜索引擎引用来高亮页面关键字             利用搜索引擎引用来高亮页面关键字{
利用搜索引擎引用来高亮页面关键字                  var ht = new HighlightText();
利用搜索引擎引用来高亮页面关键字                  ht.Execute(keywords);
利用搜索引擎引用来高亮页面关键字             }
利用搜索引擎引用来高亮页面关键字         }
利用搜索引擎引用来高亮页面关键字         else if ( host.indexOf('.baidu.') != -1 )
利用搜索引擎引用来高亮页面关键字利用搜索引擎引用来高亮页面关键字         利用搜索引擎引用来高亮页面关键字{
利用搜索引擎引用来高亮页面关键字        
利用搜索引擎引用来高亮页面关键字         }    
利用搜索引擎引用来高亮页面关键字    }   
利用搜索引擎引用来高亮页面关键字}
// 由于编码和使用频率的关系,目前只做了google搜索引擎

利用搜索引擎引用来高亮页面关键字function HighlightText(range)
利用搜索引擎引用来高亮页面关键字利用搜索引擎引用来高亮页面关键字利用搜索引擎引用来高亮页面关键字{
利用搜索引擎引用来高亮页面关键字    if ( range )
利用搜索引擎引用来高亮页面关键字利用搜索引擎引用来高亮页面关键字    利用搜索引擎引用来高亮页面关键字{
利用搜索引擎引用来高亮页面关键字         this.m_Range = range;
利用搜索引擎引用来高亮页面关键字    }
利用搜索引擎引用来高亮页面关键字    else
利用搜索引擎引用来高亮页面关键字利用搜索引擎引用来高亮页面关键字    利用搜索引擎引用来高亮页面关键字{
利用搜索引擎引用来高亮页面关键字         this.m_Range = document.body.createTextRange();
利用搜索引擎引用来高亮页面关键字    }     
利用搜索引擎引用来高亮页面关键字    this.m_Keyword = '';
利用搜索引擎引用来高亮页面关键字    
利用搜索引擎引用来高亮页面关键字    this.toString = function()
利用搜索引擎引用来高亮页面关键字利用搜索引擎引用来高亮页面关键字    利用搜索引擎引用来高亮页面关键字{
利用搜索引擎引用来高亮页面关键字         return '[class HightlightText]';
利用搜索引擎引用来高亮页面关键字    };       
利用搜索引擎引用来高亮页面关键字}

利用搜索引擎引用来高亮页面关键字
利用搜索引擎引用来高亮页面关键字HighlightText.prototype.Execute = function(keyword)
利用搜索引擎引用来高亮页面关键字利用搜索引擎引用来高亮页面关键字利用搜索引擎引用来高亮页面关键字{
利用搜索引擎引用来高亮页面关键字     if ( keyword )
利用搜索引擎引用来高亮页面关键字利用搜索引擎引用来高亮页面关键字     利用搜索引擎引用来高亮页面关键字{
利用搜索引擎引用来高亮页面关键字          this.m_Keyword = keyword;
利用搜索引擎引用来高亮页面关键字     }
利用搜索引擎引用来高亮页面关键字     if ( this.m_Range && this.m_Keyword )
利用搜索引擎引用来高亮页面关键字利用搜索引擎引用来高亮页面关键字     利用搜索引擎引用来高亮页面关键字{
利用搜索引擎引用来高亮页面关键字         var separater = ' ';
利用搜索引擎引用来高亮页面关键字         if ( this.m_Keyword.indexOf(' ') == -1 ) 
利用搜索引擎引用来高亮页面关键字利用搜索引擎引用来高亮页面关键字         利用搜索引擎引用来高亮页面关键字{
利用搜索引擎引用来高亮页面关键字              separater = '+';
利用搜索引擎引用来高亮页面关键字         }   
利用搜索引擎引用来高亮页面关键字         var keywords = this.m_Keyword.split(separater); 
利用搜索引擎引用来高亮页面关键字         var bookmark = this.m_Range.getBookmark();             
利用搜索引擎引用来高亮页面关键字         for ( var i=0 ; i < keywords.length ; ++i )
利用搜索引擎引用来高亮页面关键字利用搜索引擎引用来高亮页面关键字         利用搜索引擎引用来高亮页面关键字{
利用搜索引擎引用来高亮页面关键字             var keyword = keywords[i];
利用搜索引擎引用来高亮页面关键字             if ( keyword && keyword.length > 1 )
利用搜索引擎引用来高亮页面关键字利用搜索引擎引用来高亮页面关键字             利用搜索引擎引用来高亮页面关键字
利用搜索引擎引用来高亮页面关键字                 while(this.m_Range.findText(keywords[i]))
利用搜索引擎引用来高亮页面关键字利用搜索引擎引用来高亮页面关键字                 利用搜索引擎引用来高亮页面关键字{
利用搜索引擎引用来高亮页面关键字                      this.m_Range.execCommand('ForeColor', 'false', 'highlighttext');
利用搜索引擎引用来高亮页面关键字                      this.m_Range.execCommand('BackColor', 'false', 'highlight'); 
利用搜索引擎引用来高亮页面关键字                      this.m_Range.collapse(false);
利用搜索引擎引用来高亮页面关键字                 }
利用搜索引擎引用来高亮页面关键字                 this.m_Range.moveToBookmark(bookmark);
利用搜索引擎引用来高亮页面关键字             }
利用搜索引擎引用来高亮页面关键字         }
利用搜索引擎引用来高亮页面关键字     }
利用搜索引擎引用来高亮页面关键字}

    其它参考:UrlBuilder
    相关文章:
        ·注入Script增加了一个GoogleTrack功能

        ·用脚本为本blog增加了几项自定义功能


本文转自博客园鸟食轩的博客,原文链接:http://www.cnblogs.com/birdshome/,如需转载请自行联系原博主。

上一篇:优化求解器之AMPL建模工具简介


下一篇:【MongoDB学习笔记23】MongoDB的索引对象和数组