事例2:検索キーワードを赤字にする機能

[ソースコード]

<pre>

// ==UserScript==

// @name           SearchKeywordChangeColor.

// @namespace      http://www.4web8.com/

// @description    Search Keyword by Google change color to red.

// @include        http://*

// @exclude        http://www.google.*

// ==/UserScript==


(function() {

var referrer = document.referrer;

var body = document.getElementsByTagName("body")[0].innerHTML;

var nowurl = new RegExp( "q=" );


if( referrer.match( nowurl ) )

{

var result = referrer.match(/q=([^&]*)/);

result = RegExp.$1;


var keywords = result.split("+");


for( i=0; i<keywords.length; i++ )

{

key = decodeURI( keywords[i] );

var reg = new RegExp( key,"gi");


body = body.replace(reg,"<font color=red>" + key + "</font>");

}

}


document.getElementsByTagName("body")[0].innerHTML = body;

})();

</pre>


[実際のコードの解説]

<pre>


//リファラ取得。なんでrefererではなく、referrerなんでしょうね。

var referrer = document.referrer;


//中身をあとでゴッソリ書き換えるために取得

var body = document.getElementsByTagName("body")[0].innerHTML;


//RegExpで対象文字列を設定。ここは正規表現可。

var nowurl = new RegExp( "q=" );


//q=という文字列が見つかったら。

if( referrer.match( nowurl ) )

{

//なんだか非効率ですがいろいろなパターンを表現するため、敢えて記述

var result = referrer.match(/q=([^&amp;]*)/);


//$1や$2などで、正規表現中の(~~)の値を取得出来ます。

result = RegExp.$1;


//キーワードなので、+(つまり空白)は排除

var keywords = result.split("+");


//キーワード一つ一つに関してループ開始。

for( i=0; i&lt;keywords.length; i++ )

{

//日本語の場合もあるのでデコード

key = decodeURI( keywords[i] );


//これで、/key/giというようになる。keyの部分は変数な点を留意

var reg = new RegExp( key,"gi");


//fontタグを半ば強引に追加

body = body.replace(reg,"<font color=red>" + key + "</font>");

}


//書き換え

document.getElementsByTagName("body")[0].innerHTML = body;

}

</pre>





コメントをどうぞ