當我們在使用大多數的網頁搜尋引擎的"網頁快照"功能時，他們都會在返回的快照頁面中加入關鍵字高亮的功能。這將非常方便我們查找網頁中被檢索的內容，其中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);
}
}
}
}