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

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

    如下图,当我们在google中搜索了关键字:apache asp.net后的结果:
    GoogleResult.png

    点击结果的连接并导航到我们自己的页面后,如果我们加以如下关键字高亮,是否会对用户快速查找和定位页面感兴趣的内容,提供方便呢?
    HighlightText.gif
    
    按么我们来仔细的看看,可是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事件中调用就行了:)
None.gif function FriendlyDisplayForSearch()
ExpandedBlockStart.gif ContractedBlock.gif dot.gif{
InBlock.gif     var url =  new UrlBuilder(document.referrer);
InBlock.gif     if ( url.m_Success )
ExpandedSubBlockStart.gif ContractedSubBlock.gif     dot.gif{
InBlock.gif          var host = url.m_Host.toLowerCase();
InBlock.gif          if ( host.indexOf('.google.') != -1 )
ExpandedSubBlockStart.gif ContractedSubBlock.gif          dot.gif{
InBlock.gif              var keywords = url.GetValue('q', 'UTF8');
InBlock.gif              if ( keywords )
ExpandedSubBlockStart.gif ContractedSubBlock.gif              dot.gif{
InBlock.gif                   var ht =  new HighlightText();
InBlock.gif                  ht.Execute(keywords);
ExpandedSubBlockEnd.gif             }
ExpandedSubBlockEnd.gif         }
InBlock.gif          else  if ( host.indexOf('.baidu.') != -1 )
ExpandedSubBlockStart.gif ContractedSubBlock.gif          dot.gif{
InBlock.gif        
ExpandedSubBlockEnd.gif         }    
ExpandedSubBlockEnd.gif    }   
ExpandedBlockEnd.gif}
// 由于编码和使用频率的关系,目前只做了google搜索引擎

None.gif function HighlightText(range)
ExpandedBlockStart.gif ContractedBlock.gif dot.gif {
InBlock.gif    if ( range )
ExpandedSubBlockStart.gifContractedSubBlock.gif    dot.gif{
InBlock.gif         this.m_Range = range;
ExpandedSubBlockEnd.gif    }
InBlock.gif    else
ExpandedSubBlockStart.gifContractedSubBlock.gif    dot.gif{
InBlock.gif         this.m_Range = document.body.createTextRange();
ExpandedSubBlockEnd.gif    }     
InBlock.gif    this.m_Keyword = '';
InBlock.gif    
InBlock.gif    this.toString = function()
ExpandedSubBlockStart.gifContractedSubBlock.gif    dot.gif{
InBlock.gif         return '[class HightlightText]';
ExpandedSubBlockEnd.gif    };       
ExpandedBlockEnd.gif}

None.gif
None.gifHighlightText.prototype.Execute =  function(keyword)
ExpandedBlockStart.gif ContractedBlock.gif dot.gif {
InBlock.gif     if ( keyword )
ExpandedSubBlockStart.gifContractedSubBlock.gif     dot.gif{
InBlock.gif          this.m_Keyword = keyword;
ExpandedSubBlockEnd.gif     }
InBlock.gif     if ( this.m_Range && this.m_Keyword )
ExpandedSubBlockStart.gifContractedSubBlock.gif     dot.gif{
InBlock.gif         var separater = ' ';
InBlock.gif         if ( this.m_Keyword.indexOf(' ') == -1 ) 
ExpandedSubBlockStart.gifContractedSubBlock.gif         dot.gif{
InBlock.gif              separater = '+';
ExpandedSubBlockEnd.gif         }   
InBlock.gif         var keywords = this.m_Keyword.split(separater); 
InBlock.gif         var bookmark = this.m_Range.getBookmark();             
InBlock.gif         for ( var i=0 ; i < keywords.length ; ++i )
ExpandedSubBlockStart.gifContractedSubBlock.gif         dot.gif{
InBlock.gif             var keyword = keywords[i];
InBlock.gif             if ( keyword && keyword.length > 1 )
ExpandedSubBlockStart.gifContractedSubBlock.gif             dot.gif
InBlock.gif                 while(this.m_Range.findText(keywords[i]))
ExpandedSubBlockStart.gifContractedSubBlock.gif                 dot.gif{
InBlock.gif                      this.m_Range.execCommand('ForeColor', 'false', 'highlighttext');
InBlock.gif                      this.m_Range.execCommand('BackColor', 'false', 'highlight'); 
InBlock.gif                      this.m_Range.collapse(false);
ExpandedSubBlockEnd.gif                 }
InBlock.gif                 this.m_Range.moveToBookmark(bookmark);
ExpandedSubBlockEnd.gif             }
ExpandedSubBlockEnd.gif         }
ExpandedSubBlockEnd.gif     }
ExpandedBlockEnd.gif}

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

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


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

目录
相关文章
|
4月前
|
搜索推荐 UED 计算机视觉
搜索引擎优化指南:SEO关键字、长尾关键字、短尾关键字以及反向链接
SEO 代表“搜索引擎优化”。它是一种数字营销策略,旨在提高网站或网页在搜索引擎未付费结果中的在线可见性。通常,网站在搜索结果页面中排名越高,或在搜索结果列表中显示的频率越高,它将从搜索引擎用户那里获得的访问者就越多。SEO 策略可以针对各种类型的搜索,例如图像搜索、本地搜索、视频搜索、学术搜索、新闻搜索和特定行业的垂直搜索引擎。它包括一系列活动,例如关键字研究和优化、链接建设和内容创建,旨在使网站更吸引搜索引擎。除了帮助提高可见性之外,SEO 还可以帮助改善网站的用户体验和可用性。
99 0
|
9月前
|
JavaScript
js搜索关键字,并高亮显示
js搜索关键字,并高亮显示
84 0
|
10月前
|
JavaScript IDE 前端开发
使用 GPT 写代码:高亮页面关键字
使用 GPT 写代码:高亮页面关键字
83 0
|
存储 JavaScript
vue实现用户搜索关键字匹配
vue实现用户搜索关键字匹配
|
存储 SQL JSON
APIJSON - 功能符、数组关键词、对象关键词、全局关键词简表速查
APIJSON - 功能符、数组关键词、对象关键词、全局关键词简表速查
544 0
APIJSON - 功能符、数组关键词、对象关键词、全局关键词简表速查
FineReport学习(四)——条件属性和超链接(二)
FineReport学习(四)——条件属性和超链接(二)
FineReport学习(四)——条件属性和超链接(二)
FineReport学习(四)——条件属性和超链接(一)
FineReport学习(四)——条件属性和超链接(一)
FineReport学习(四)——条件属性和超链接(一)
FineReport学习(四)——条件属性和超链接
FineReport学习(四)——条件属性和超链接
FineReport学习(四)——条件属性和超链接
|
Web App开发 缓存 网络协议
网页页面下各种标签的含义
1、charset: 2、X-UA-Compatible: 3、canonical : 4、dns-prefetch: 5、keywords 6、viewport 7、description
136 0