ハイライト関数は、主に、ページの指定された領域、つまり背景色の指定された領域の指定されたテキストを強調表示することを指します。この関数は通常、検索結果ページで使用されます。
JavaScriptを使用して実装するソリューションを次に示します。
まず、<head>で次のJavaScriptメソッドを紹介します。
コードコピーは次のとおりです。
<script type = "text/javascript">
// <！[cdata [
// -------- function fhl（o、flag、rndcolor、url）--------------- //
関数fhl（o、flag、rndcolor、url）{
/// <summary>
/// JavaScript HTML DOMを使用して、ページ固有の単語を強調表示します。
/// 例：
/// fhl（document.body、 'Paper umbrella | he'）;
///ここのボディは、強調表示された本体のコンテンツを指します。
/// fhl（document.body、 'hope | sorry'、false、 '/'）;
/// fhl（document.getElementById（ 'at_main'）、 'solar | floating | long'、true、 'search.asp？keyword ='）;
///ここに「at_main」は、強調表示されたid = 'at_main'を使用してdivのコンテンツを指します。 search.asp？キーワード=キーワードに追加されたリンクアドレスを参照してください。
///ここにパラメーターを追加しましたが、後で使用されます。任意のアドレスにすることができます。
/// </summary>
/// <param name = "o" type = "object">
///オブジェクト、強調表示されるオブジェクト。
/// </param>
/// <param name = "flag" type = "string">
///文字列、単語または複数の単語を強調表示するには、垂直バー（|）を使用して複数の単語を分離します。
/// </param>
/// <param name = "rndcolor" type = "boolean">
///ブール値は、テキストの背景色とテキストの色をランダムに表示するかどうかにかかわらず、真の意味をランダム表示します。
/// </param>
/// <param name = "url" type = "string">
/// uri、強調表示された単語にリンクを追加するかどうか。
/// </param>
/// <Return> </return>
var bgcor = fgcor = '';
if（rndcolor）{
bgcor = frndcor（10、20）;
fgcor = frndcor（230、255）;
} それ以外 {
bgcor = '＃f0f';
fgcor = 'black';
}
var re = new regexp（flag、 'i'）;
for（var i = 0; i <o.childnodes.length; i ++）{
var o_ = o.childnodes [i];
var o_p = o_.parentnode;
if（o_.nodetype == 1）{
fhl（o_、flag、rndcolor、url）;
} else if（o_.nodetype == 3）{
if（！（o_p.nodename == 'a'））{
if（o_.data.search（re）== -1）継続;
var temp = feelea（o_.data、flag）;
o_p.replacechild（Temp、O_）;
}
}
}
// -----------------------------------------------------------
function feelea（テキスト、フラグ）{
var style = 'style = "background-color：'+bgcor+'; color：'+fgcor+';" '
var o = document.createelement（ 'span'）;
var str = '';
var re = new regexp（ '（'+flag+'）'、 'gi'）;
if（url）{
str = text.replace（re、 '<a href = "'+url+
'$ 1 "'+style+'> $ 1 </a>'）; //ここにキーワードへのリンクがあり、赤い$ 1は上記のリンクアドレスの後の特定のパラメーターを指します。
} それ以外 {
str = text.replace（re、 '<span'+sylow+'> $ 1 </span>'）; //リンクしていないときに表示します
}
o.innerhtml = str;
oを返します。
}
// -----------------------------------------------------------
関数frndcor（under、over）{
if（arguments.length == 1）{
var over = under;
under = 0;
} else if（arguments.length == 0）{
var under = 0;
var over = 255;
}
var r = frandomby（under、over）.tostring（16）;
r = padnum（r、r、2）;
var g = frandomby（under、over）.tostring（16）;
g = padnum（g、g、2）;
var b = frandomby（under、over）.tostring（16）;
b = padnum（b、b、2）;
// defaultStatus = r+''+g+''+b
'＃'+r+g+bを返します。
frandomby（under、over）{
switch（arguments.length）{
ケース1：parseint（math.random（）*under+1）を返します。
ケース2：parseint（math.random（）*（オーバーアンダー1） + under）を返します。
デフォルト：0を返します。
}
}
function padnum（str、num、len）{
var temp = ''
for（var i = 0; i <len; temp+= num、i ++）;
return temp =（temp+= str）.substr（temp.length-len）;
}
}
}
// --------エンド関数fhl（o、flag、rndcolor、url）------------------ //
//]]>
</script>
上記のFHLメソッドは、強調表示を実現するために使用され、パラメーターの意味はコメントに記載されています。
次に、ページの最後にあるFHLメソッドを呼び出して、指定された領域のテキストを強調表示します。
コードコピーは次のとおりです。
<script type = "text/javascript">
fhl（document.body、 'highlight'）; //ページボディの領域の「ハイライト」テキストの背景を色付けします
</script>
それはどうですか、それはとても簡単です〜