论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > javascript教程教程
Tag:验证,特效,入门,实例,验证,表单,特效,正则表达式,跑马灯,document,函数,代码,getElementByID,菜单,图片,视频教程

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

文章类别:javascript教程 | 发表日期:2008-10-5 17:46:43

    当我们在使用大多数的网页搜索引擎的"网页快照"功能时,他们都会在返回的快照页面中加入关键字高亮的功能。这将非常方便我们查找网页中被检索的内容,其中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事件中调用就行了:) 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);
             }
         }
     }
}

视频教程列表
文章教程搜索
 
Javascript推荐教程
Javascript热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058