目次

オブジェクトなJavaScriptの基礎講座

RegExp(正規表現)オブジェクト

◆ はじめに

Perl言語では、テキストの置換や検索処理をする時に強力な機能の正規表現がありますが、実は、同等の機能がJavaScriptにも実装されています。

今回は、JavaScriptの正規表現について、お勉強をしてみましょう!


そもそも正規表現は、人体の神経回路網を数学的に説明するための方法として開発されました。その後、UNIXのケン・トンプソンによってコンピュータでの検索アルゴリズムに引き継がれました。ちなみに、正規表現を初めて使用したアプリケーションは UNIX のエディタedのようです。

◆ 正規表現オブジェクト(Regular Expression Object)

regexp = new RegExp(patern[, flag]);

上記のように正規表現オブジェクト(regexp)は、正規表現クラス(RegExp)に引数として正規表現パターン(patern)とフラグ(flag)をセットしてnew演算子で作成します。メソッドとプロパティは以下の通りです。

正規表現オブジェクト(regexp 尚、名前は任意です。)のメソッドとプロパティ

正規表現クラス(RegExp 尚、名前は任意ではないです。)のプロパティ

正規表現クラス(RegExp)には、以下のプロパティあり、実行時にその時点の正規表現オブジェクトの参照や入力等が出来ます。

正規表現パターン(patern)

■文字クラス

[補足説明]
/koike/ だと koikesでもマッチしてしまいますが、/\bkoike\b/だと回避できます。

■繰り返し
■グループと選択
■位置指定
■エスケープ

[補足説明]
\は、特殊記号(\,/,^,$,*,+,?,{,|,},[,]など)の前では特殊記号の本来の作用をエスケープし、 特殊記号以外では書かないのと同じになります。

正規表現フラグ(flag)

サンプルスクリプト(その1)

<script type="text/javascript">
<!--
function chkTEXT(regexp_str, str){  
	re = new RegExp(regexp_str, "ig");
	if (str.match(re)) {
		alert("マッチしました!");
	}
	else{
		alert("マッチしません!");
	}
	alert("iフラグが指定されているか?\n re.ignoreCase = " + re.ignoreCase);
	alert("gフラグが指定されているか?\n re.global = " + re.global);
	alert("正規表現パターンを示す文字列\n re.source = " + re.source);
	alert("マッチしたかどうかの真偽値\n re.test = " + re.test(str) +"(IEは未サポート)");
	alert("マッチした開始位置\n RegExp.index  = " + RegExp.index);
	alert("マッチした部分の次の位置\n RegExp.lastIndex  = " + RegExp.lastIndex);
	alert("最後にマッチした文字列\n RegExp.lastMatch  = " + RegExp.lastMatch);
	alert("マッチした部分よりも左側の文字列\n RegExp.leftContext  = " + RegExp.leftContext);
	alert("マッチした部分よりも右側の文字列\n RegExp.rightContext  = " + RegExp.rightContext);
	alert("最後に対応する文字列\n RegExp.lastParen  = " + RegExp.lastParen);
}
// -->
</script>
<form>
<p>いろいろ入力してみて正規表現を楽しんでみてください!<br>
検索正規表現 :<input type="text" name="text1"><br>
検索対象文字列:<input type="text" name="text2">
<input type="button" name="button0" value="OK" onClick="chkTEXT(this.form.text1.value, this.form.text2.value)">
</p>
</form>

サンプルスクリプト(その1)実行

いろいろ入力してみて正規表現を楽しんでみてください!

尚、正規表現のさっぱりわからない人のためにこんなページ正規表現(基礎編1)を用意しました。

例:検索正規表現 = \d+ 、 検索対象文字列 = abc123def

検索正規表現 :
検索対象文字列:

◆ 検索

今まで、正規表現オブジェクトについて学んできましたが、実は、オブジェクトでなくとも正規表現が利用できます。また、こちらの方が実用的だったりします。ということで、サンプルその2です。

利用方法は、stringオブジェクトのmatchメソッドの引数に正規表現を/で挟んで指定します。以下の感じです。

サンプルスクリプト(その2)

<script type="text/javascript">
<!--
function chkTEXT2(str){  
	if (str.match(/^ちゃいちゃん/)) {
		alert("ちゃいちゃんにマッチしました!");
	}
	else{
		alert("ちゃいちゃんにマッチしません!");
	}
	if (str.match(/^[0-9][0-9]:[0-9][0-9]:[0-9][0-9]$/)){
		alert("hh:mm:ss のパターンにマッチしました。");
	}
	else{
		alert("hh:mm:ss のパターンにマッチしません。");
	}
}
// -->
</script>
<form>
<p>「ちゃいちゃん」からはじまる文か、又は、「hh:mm:ss」の時分秒を入力してみてください。<br>
検索対象文字列:<input type="text" name="text3">
<input type="button" name="button0" value="OK" onClick="chkTEXT2(this.form.text3.value)">
</p>
</form>

サンプルスクリプト(その2)実行

「ちゃいちゃん」か又は、「hh:mm:ss」の時分秒を入力してみてください。
検索対象を含む文字列:

◆ 置換

利用方法は、stringオブジェクトのreplaceメソッドの第一引数に正規表現を/で挟んで指定し、第二引数に置換される文字を含む文字列を指定ます。実行後、置換された文字列はリターン値として帰ります。

つまり、Perl言語みたいに、同じエリアではなく、別エリアに置換されます。

サンプルスクリプト(その3)

<script type="text/javascript">
<!--
function repTEXT(str, chg_str){  
	str2 = str.replace(/[a-z]/ig, chg_str );
	alert("置換前:" + str + "\n" + "置換後:" + str2);
}
// -->
</script>
<form>
<p>
以下を入力して、いろいろ試してください!<br>
置換対象を含む文字列:<input type="text" name="text4"><br>
置換文字列:<input type="text" name="text5">
<input type="button" name="button0" value="OK" onClick="repTEXT(this.form.text4.value,this.form.text5.value)">
</p>
</form>

サンプルスクリプト(その3)実行

文字列中のアルファベットをすべて置き換えます。
以下を入力して、いろいろ試してください!
例:文字列 = 111a222bb333、置換文字列 = X
文字列:
置換文字列:

◆ おわりに

JavaScriptで正規表現を使う機会は、フォームからの入力時の文字列チェックぐらいでしょうか...。しかし、ローカルでブラウザのみで、簡単に正規表現を体験できることは、それだけで価値があると思います。

後は、各自各々、正規表現を勉強してみてください!

尚、今回いろいろテストして思ったことは、正規表現オブジェクトはあまり使えない(結構、はまった...)、むしろ、matchプロパティでの正規表現の方が、ブラウザが理解してくれます!

最後に、本ページを作成するにあたり、杜甫々さんの正規表現(RegExp)のページを大変参考にさせてもらいました。 こちらも是非全読してみてください。 いつも、大変お世話になっています。感謝感謝です!

目次