JavaScriptでキーワードハイライト機能を実装_基礎知識

ハイライト機能とは主に、ページ上の指定された領域内の指定されたテキストを強調表示すること、つまり背景の色付けを指します。一般的には検索結果ページでよく使われる機能です。

以下は、JavaScript を使用して実装された、誰にとっても役立つ解決策です。

まず、 に次の JavaScript メソッドを導入します:

コードをコピー コードは次のとおりです:

<スクリプトタイプ="text/javascript">
// //--------開始関数 fHl(o, flag, rndColor, url)-----------------//
関数 fHl(o, フラグ, rndColor, url){
///
/// JavaScript HTML DOM を使用して、ページ上の特定の単語を強調表示します。
/// fhl（document.body、 'Paper Umbrella | he'）; ここの本体は、強調表示された本体の内部のコンテンツを指します。
fhl（document.body、「希望」、false、 '/'）; fhl（document.getElementbyid（ 'at_main'）、 '単独| long'、true、search.asp？keyword = '）; 。 search.asp?keyword= は、キーワード
に追加されたリンク アドレスを指します。 ここにパラメーターを追加しましたが、後で使用します。任意のアドレスを指定できます。
///
///
/// オブジェクト、強調表示されるオブジェクト
///
///
/// 文字列、強調表示する単語または複数の単語。複数の単語を区切るには縦棒 (|) を使用します。 ///
///
テキストの背景色とテキストの色をランダムに表示するかどうか。true はランダム表示を意味します。 ///
///
/// URI、強調表示された単語へのリンクを追加するかどうか。
                                                              ///
var bgCor=fgCor=''; If(rndColor){
bgCor=fRndCor(10, 20); fgCor=fRndCor(230, 255); } else {
bgCor='#F0F';
fgCor='黒'; }
var re=new RegExp(flag, 'i'); for(var i=0; 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=fEleA(o_.data, flag); o_p.replaceChild(temp, o_);                                                                                                     }
}
//------------------------------------------------
関数 fEleA(テキスト, フラグ){
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, '$1'); //これはキーワードへのリンクを追加するもので、赤い $1 は上記のリンク アドレスの後の特定のパラメーターを指します。
} else {
str=text.replace(re, '$1') // リンクが追加されていない場合は
を表示します                                                              o.innerHTML=str;
を返します。 }
//------------------------------------------------
関数 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
return '#' r g b; 関数 fRandomBy(下、上){
switch(arguments.length){
ケース 1: parseInt(Math.random()*under 1) を返します。 ケース 2: return parseInt(Math.random()*(over-under 1) under); デフォルト: 0 を返します。                                                                                                                  }
functionpadNum(str, num, len){
var temp=''
for(var i=0; i }
}
//----------終了関数 fHl(o, flag, rndColor, url)--------------------------//
//]]>



上記の fHl メソッドは強調表示を実現するために使用されており、パラメータの意味はコメントに書かれています。

次に、ページの最後で fHl メソッドを呼び出して、指定された領域のテキストを強調表示します。次に例を示します。

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">

fHl(document.body, 'highlight'); // ページの本文領域の「ハイライトされた」テキストの背景に色を付けます

どうですか、とても簡単ですよ~

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。