検索エンジンの引用を使用してページのキーワードを強調表示する

ほとんどの Web 検索エンジンの「Web スナップショット」機能を使用すると、返されたスナップショット ページにキーワードの強調表示が追加されます。これは、Web ページ内で取得したコンテンツを見つけるのに非常に便利です。Google スナップショットのキーワード強調表示には単語分割機能も組み込まれており、異なる単語が異なる色で表示されます。ただし、%!#^*&$! のせいで、Google の Web ページのスナップショットは非常に不安定なので、このキーワード ハイライト機能を自分で追加しましょう。

以下に示すように、Google で apache asp.net というキーワードを検索すると、次の結果が得られました。

結果のリンクをクリックして自分のページに移動した後、次のキーワードを強調表示すると、ユーザーはページ上で興味のあるコンテンツをすぐに見つけて見つけやすくなりますか?

詳しく見てみましょう。ただし、IE のアドレスは明らかにhttp://birdshome.cnblogs.com/archive/2005/11/17/Apache.htmlです。では、どうすればページ内で強調表示され、検索で取得できるのでしょうか。エンジンはどうですか？ここでは、ドキュメントのリファラー属性を使用して、検索エンジンの種類とキーワードの情報を取得します。たとえば、上記の例では、 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 イベントに入れて呼び出すだけです:) 関数 FriendlyDisplayForSearch()
{
var url = 新しい UrlBuilder(document.referrer);
if (url.m_Success)
{
var ホスト = url.m_Host.toLowerCase();
if ( host.indexOf('.google.') != -1 )
{
var キーワード = url.GetValue('q', 'UTF8');
if(キーワード)
{
var ht = 新しいハイライトテキスト();
ht.Execute(キーワード);
}
}
else if ( host.indexOf('.baidu.') != -1 )
{

}
}
}// エンコードと使用頻度の関係により、現在は Google 検索エンジンの

関数 HighlightText(range)

{
if(範囲)
{
this.m_Range = 範囲;
}
それ以外
{
this.m_Range = document.body.createTextRange();
}
this.m_Keyword = '';

this.toString = function()
{
'[クラス HightlightText]' を返します。
};
HighlightText.prototype.Execute

= 関数(キーワード)
{
if(キーワード)
{
this.m_Keyword = キーワード;
}
if ( this.m_Range && this.m_Keyword )
{
var セパレータ = ' ';
if ( this.m_Keyword.indexOf(' ') == -1 )
{
セパレータ = '+';
}
var キーワード = this.m_Keyword.split(セパレータ);
var ブックマーク = this.m_Range.getBookmark();
for ( var i=0 ; i < キーワード.length ; ++i )
{
var キーワード = キーワード[i];
if (キーワード && キーワード.長さ > 1)
{
while(this.m_Range.findText(キーワード[i]))
{
this.m_Range.execCommand('ForeColor', 'false', 'ハイライトテキスト');
this.m_Range.execCommand('BackColor', 'false', 'ハイライト');
this.m_Range.collapse(false);
}
this.m_Range.moveToBookmark(ブックマーク);
}
}
}
}