开发者社区> 唐玄奘> 正文

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

简介:
+关注继续查看
  当我们在使用大多数的网页搜索引擎的"网页快照"功能时,他们都会在返回的快照页面中加入关键字高亮的功能。这将非常方便我们查找网页中被检索的内容,其中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.giffunction FriendlyDisplayForSearch()
ExpandedBlockStart.gifContractedBlock.gifdot.gif{
InBlock.gif    var url = new UrlBuilder(document.referrer);
InBlock.gif    if ( url.m_Success )
ExpandedSubBlockStart.gifContractedSubBlock.gif    dot.gif{
InBlock.gif         var host = url.m_Host.toLowerCase();
InBlock.gif         if ( host.indexOf('.google.') != -1 )
ExpandedSubBlockStart.gifContractedSubBlock.gif         dot.gif{
InBlock.gif             var keywords = url.GetValue('q', 'UTF8');
InBlock.gif             if ( keywords )
ExpandedSubBlockStart.gifContractedSubBlock.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.gifContractedSubBlock.gif         dot.gif{
InBlock.gif        
ExpandedSubBlockEnd.gif         }    
ExpandedSubBlockEnd.gif    }   
ExpandedBlockEnd.gif}
// 由于编码和使用频率的关系,目前只做了google搜索引擎

None.giffunction HighlightText(range)
ExpandedBlockStart.gifContractedBlock.gifdot.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.gifContractedBlock.gifdot.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/,如需转载请自行联系原博主。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
面试再问值传递与引用传递,把这篇文章砸给他!
java的值传递和引用传递在面试中一般都会都被涉及到,今天我们就来聊聊这个问题,首先我们必须认识到这个问题一般是相对函数而言的,也就是java中的方法参数,那么我们先来回顾一下在程序设计语言中有关参数传递给方法(或函数)的两个专业术语:  ●  按值调用(call by value) ●  按引用调用(call by reference)所谓的按值调用表示方法接收的是调用着提供的值,而按引用调用则表示方法接收的是调用者提供的变量地址(如果是C语言的话来说就是指针啦,当然java并没有指针的概念)。
1326 0
用PostgreSQL 做实时高效 搜索引擎 - 全文检索、模糊查询、正则查询、相似查询、ADHOC查询
用PostgreSQL 做实时高效 搜索引擎 - 全文检索、模糊查询、正则查询、相似查询、ADHOC查询作者digoal 日期2017-12-05 标签PostgreSQL , 搜索引擎 , GIN , ranking , high light , 全文检索 , 模糊查询 , 正则查询 , 相似查询 , ADHOC查询 背景字符串搜索是非常常见的业务需求,它包括: 1、前缀+模糊查询。
5939 0
Xmanager 远程桌面连接Redhat Linux(引用)
原文链接:http://www.cnblogs.com/huzhiwei/archive/2012/05/07/2487266.html  我用的是RedHat Enterprise Linux 5.4和最新的Xmanager Enterprise3.0。
1774 0
对于已经添加引用,还找不到类型或名字空间的错误及svn客户端清除用户帐号密码
1 已经添加过引用,却找不到类型或名字空间。 可以看下项目的的.net framework版本是否一致。 项目(例如类库项目)右键(vs解决方案资源管理器)——》属性——》应用程序——》目标框架。 也就是检查一下引用项目与被引用项目的目标框架是否版本一致。
699 0
《SEO的艺术(原书第2版)》——3.3 理解搜索引擎流量和用户意图
本节书摘来自华章计算机《SEO的艺术(原书第2版)》一书中的第3章,第3.3节,作者:(美)恩吉(Enge, E.)著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
741 0
JS引用路劲为什么在前面加上两个斜杠
原文:JS引用路劲为什么在前面加上两个斜杠 //表示同协议,一般现在用在https跨域名地址情况下。比如第三方统计代码的引入,用//就不用很麻烦地区分https还是http,也不用担心https下降到http出问题 ...
747 0
+关注
641
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载