When we use the "web snapshot" function of most web search engines, they will add keyword highlighting to the returned snapshot page. This will be very convenient for us to find the retrieved content in the web page. The keyword highlighting of Google snapshots also incorporates the word segmentation function, and different words are colored in different colors. However, due to %!#^*&$!, Google’s web page snapshot is very unstable, so let’s add this keyword highlighting function ourselves.
As shown below, when we searched for the keyword: apache asp.net in Google, the results were:
After clicking on the link of the result and navigating to our own page, if we highlight the following keywords, will it make it easier for users to quickly find and locate the content of interest on the page?
Let’s take a closer look, but the address in IE is clearly: http://birdshome.cnblogs.com/archive/2005/11/17/Apache.html , so how can it be highlighted in the page and retrieved by the search engine? What about the keywords? Here we use the referrer attribute of document to obtain search engine type and keyword information. For example, in the above example, the document.referrer attribute is: 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 . We analyze the keywords of the specified search engine through JavaScript, and then operate the page DOM object to realize the highlighting function. However, for long consecutive Chinese keywords, this client-side highlighting solution cannot provide word segmentation function, which is a fly in the ointment.
The code to specifically implement the search keyword highlighting on the current page is as follows. Just put it in the document.body.onload event of the page and call it:) 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 )
{
}
}
}// Due to the relationship between encoding and frequency of use, currently only the google search engine
function HighlightText(range)
is done
{
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);
}
}
}
}