【jQueryのプラグインを作ろう！】

第8回「http://で始まる文字を自動リンクしよう」
＊これはascii.jpで連載した記事の続きです。このため、このページを読む前にあらかじめascii.jpで連載した記事をお読み下さい。

text : 古籏一浩

■URLがあれば自動リンク

　ページ内にhttp://www.openspc2.org/などのURLがある場合、自動的にリンクしてくれると便利です。そこで、今回は文章内にhttp://で始まる文字列があればURLとみなして自動的にリンクするプラグインを作成しましょう。

■正規表現で置換

　今回はURLを自動的にリンクに置換します。このような場合、JavaScriptの正規表現を使うと簡単に処理できます。JavaScriptでの正規表現の置換処理を行うのはreplace()です。最初のパラメータに検索したい正規表現を、2番目のパラメータに置換する文字列を指定します。
　URLはhttp://で始まる英文字と記号ということにすると正規表現では以下のように書くことができます。

http:\/\/[\x21-\x7e]+

　x21は16進数表記でLatin-1（ラテン1）コードを示しています。x21は!文字ということを示し、x7eは~（チルダー）文字を示してします。この範囲の文字は全てマッチする対象になるので、数値や記号のほとんど全てが含まれることになります。ただし、半角空白は区切りとして処理したいので含まないようにしています。半角空白はx20なのでx21からということにしておけば何の問題もありません。
　URLの区切りは半角空白や日本語となります。このため、Wiki日本語版や日本語ドメインのURLなどは正しく処理されません。また、文字列内にaタグがある場合も同様に正しく処理されません。このような場合は、シリアルサーチを使った方が確実とも言えます。
　次に見つかった文字列＝URLを置換することになりますが、同じ文字列で置換する場合と異なり見つかった文字列をURLとしてaタグに設定し置換しなければなりません。そこで、以下のように正規表現の文字列を()で囲みます。

(http:\/\/[\x21-\x7e]+)

　このようにすると()によりマッチした文字列が$1として取り出せるようになります。この$1はreplace()の2番目のパラメータの文字列内に書くことで自動的に置換されます。例えば"test=$1"と指定した場合、マッチした文字列がOpenSpaceなら置換文字列は"test=OpenSpace"となります。今回はURLにリンクするので以下のようにaタグのhref属性のパラメータとして$1を指定すればよいことになります。

replace(/(http:\/\/[\x21-\x7e]+)/gi, "<a href='$1'>$1</a>")

　これで置換した文字列を書き戻せばできあがりです。
　完成したプラグインのソースリストを以下に示します。

【プラグインのソース】

/* 自動URLリンクプラグイン for jQuery
2009.1 By KaZuhiro FuRuhata  */
$.fn.urlAutoLink = function(baseURL){
	return this.each(function(){
		var srcText = this.innerHTML;
		this.innerHTML = srcText.replace(/(http:\/\/[\x21-\x7e]+)/gi, "<a href='$1'>$1</a>");
	});
}

■実際に使ってみよう

　それでは作成したプラグインを使ってみましょう。
　最初にjQueryライブラリファイルを読み込ませたあとにプラグインファイルを読み込ませます。

	<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
	<script type="text/javascript" src="js/urlAutoLink.js"></script>

　次に自動リンクしたい要素を$()のセレクタで指定します。エレメント内にHTMLタグが含まれていても構いませんが、aタグなどが含まれていると正しく動作しないので注意してください。

$("#sampleDoc").urlAutoLink();

　これでURLが自動的にリンクされるようになります（サンプルを実行する）。