利用搜尋引擎引用來高亮頁面關鍵字

  當我們在使用大多數的網頁搜尋引擎的"網頁快照"功能時，他們都會在傳回的快照頁面中加入關鍵字高亮的功能。這将非常友善我們查找網頁中被檢索的内容，其中google快照的關鍵字高亮還融入了分詞功能，不同的詞着以不同的顔色。可是由于%!#^*&$!的原因，google的網頁快照非常的不穩定，那麼我們就自己來加上這個關鍵字高亮功能吧。

如下圖，當我們在google中搜尋了關鍵字：apache asp.net後的結果：

點選結果的連接配接并導航到我們自己的頁面後，如果我們加以如下關鍵字高亮，是否會對使用者快速查找和定位頁面感興趣的内容，提供友善呢？

具體實作目前頁面被檢索關鍵字高亮的代碼如下，放入頁面的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);

    相關文章：

本文轉自部落格園鳥食軒的部落格，原文連結：http://www.cnblogs.com/birdshome/，如需轉載請自行聯系原部落客。