jQueryで正規表現を学んでみる。【基礎編】

文字列を置き換える基本の形

正規表現の前にjQueryで単純な文字列を取得して、置き換えて表示するということをしてみます。

html

	<p>
	正規表現はjavascript以外のプログラムやテキストエディターなどの検索でも使えます。でもここではJavaScriptを使うんです。
	</p>
	

例えばここにpタグでマークアップされた文字列があります。
「javascript」を「jQuery」に置き換えてみましょう。
文字列の取得と表示にはjQueryを使用しますが、置き換えはjavascriptの「replace」メソッドを使用します。
「replace」の使い方は次のようになります。

元の文字列.replace(置き換前の文字列,置き換え後の文字列)

つまり第一引数に「javascript」、第二引数に「jQuery」を入れればいけそうですね。

javascript

	$(function() {
		$('p').each(function(){
			var txt = $(this).html();
			$(this).html(
				txt.replace('javascript','jQuery')
			);
		});
	});
	

これで「javascript」を「jQuery」に置き換えることができましたね。
二つ目の「JavaScript」が置き換わってない気がしますよね。

正規表現の基本

正規表現は文字列をパターン化することで、ある一定の規則のものだけを検索することができます。
ということで正規表現のパターンというのを作成していくわけですが、「replace」メソッドを使用した置き換えの基本型はこんな感じになります。

replace(/パターン/修飾子,’置き換え後の文字列’)

パターンは「//」で囲み、さらにその後に修飾子というのを付けることによってオプション的な設定ができるわけですね。
ではさきほどやった「javascript」の置き換えをこの型に当てはめてみましょう。
「replace」の部分を下記の置き換えます。

	txt.replace(/javascript/gi,'jQuery')
	

どうでしょう。今度は二つ目の「JavaScript」も置き換わってますね。これは修飾子を設定してあるからです。
「gi」という部分ですね。通常は最初の一つ目がマッチすると検索は終わってしまうのですが「g」を入れることでその後の文字列を置き換えます。
「i」は大文字と小文字の区別しないで検索することができます。「javascript」でも「JavaScript」でも置き換えてくれるんですね。

指定拡張子のファイル名の末尾に文字列を追加する

マウスオーバー画像などを作成するときはファイル名の最後に「_on」などの文字列を追加する場合があります。
「gif」「jpg」「png」いずれかの拡張子だった場合ファイルの末尾に「_on」を追加するパターンを作成してみましょう。
たとえばこんなhtmlがあったとします。

	<p>
	img001.jpg<br />
	img002.gif<br />
	img003.png<br />
	img004.jpg<br />
	</p>
	

検索する部分は拡張子なんで前に「.（ドット）」を含めるとこうなります。

	txt.replace(/(\.gif|\.jpg|\.png)/g,'_on$1')
	

拡張子の前の「.」はメタ文字と呼ばれる意味のある文字なのでそのままでは検索されません。前に「\」を置くことで「.」を検索できるようにできます。
いずれかのようなことをする場合は「|」で区切っていきます。最後に「()」で囲みグループ化してます。

置き換え後の文字列は、今まで決められた文字列にしか置き換えなかったのでそのまま入力すればよかったのですが、今回は「gif」「jpg」「png」で何がマッチするかわかりませんよね。
「$1」という文字列で、マッチした文字列を表示させることができます。
なので、「_on$1」とすることで、「_on.jpg」だったり「_on.png」にすることができるんですね。

ちなみにこの「1」は一つ目のグループという意味でグループが二つある場合は「$2」といった具合に増えていきます。
例えばグループを二つに分ける場合こんな感じで書くこともできます。

	txt.replace(/(\.)(gif|jpg|png)/g,'_on$1$2')
	

もうすこし厳密にしてみる

次に一定のパターンのファイル名の場合のみ置き換えを行います。
例えばこのhtmlだと「img」から始まり「数字が3文字」続き、最後に「拡張子」ですよね。
これをパターンにすると下記のようになります。

	txt.replace(/(img[0-9]{3})(\.)(gif|jpg|png)/g,'$1_on$2$3')
	

「(img[0-9]{3})」という部分が増えてます。
最初の「img」はそのままですが、その次の数字は0かもしれないし5かもしれませんよね。
そんなときに[0-9]と表記します。これでいくつかわからないけど数字が入るということになります。
その他にも例えばアルファベットだけマッチさせたいということもできます。

で最後に{3}の部分が、その数字が3文字続くという意味です。
●回以上マッチもいろいろと設定ができますので下記の表を参考にしてください。

正規表現は結構奥が深い世界らしいですが、これだけの知識でもそこそこなことはできてしまうのではないでしょうか。