|
||||
home / Knave web lecture / JavaScript / 15章 JavaScriptでの正規表現 |
|
|
正規表現とは、、
正規表現とは文字列の一部をパターン化して記述する表現方法の事になります。例えば、「*」を任意の文字列、「？」を任意の 1文字として表す事が出来ます。 もとは UNIXの awk、Perlなどのテキストフィルタで用いられていましたが、JavaScriptでも正規表現をサポートしており使用することが出来ます。
vb.txt perl.txt c.txt java.txt これらをまとめて以下のように表現できる。
*.txt
上の例では [ *.txt ] が左の4つの文字列を表わす正規表現となります。 またこのように正規表現で表現出来る事をマッチすると言います。 JavaScriptで使用できるメタキャラ
上の例で出てくる [ . ] はメタキャラと呼ばれるものです。 このメタキャラは正規表現では一つで英数字を表現したり、または英数字以外を表現したりとても重要な役割を持っています。 これから代表的なメタキャラの使用法を見ていきます。 下に [ メタキャラ一覧表 ] もありますので参照して下さい。
任意の一文字 【 "." 】
改行文字を除く任意の1文字 [ 表現 ]
windows..
[ 結果 ]
windowsNT # 全てマッチ windows98 # 全てマッチ windows3.1 # windows3.までマッチ くり返し表現 【 " * " , " ? " , " + " 】
前で説明した任意の１文字では上の全てをマッチする事は出来ませんでした。しかしこれから説明する繰り返し表現を使用する事により、ある文字や文字列の繰り返しという複雑な表現をする事が出来ます。 " * "前にある文字の0回以上の表現 [ 表現 ]
12*
[ 結果 ]
1222222222 # 全てマッチ 1 # ０回もマッチ " ? "前にある文字の0,1回の表現 [ 表現 ]
12?
[ 結果 ]
1222222222 # # 12のみマッチ 1 # ０回もマッチ " + "前にある文字の1回以上の表現 [ 表現 ]
12+
[ 結果 ]
1222222222 # 全てマッチ 1 # 0回なのでマッチしない JavaScriptでは通常で最長マッチとなります [ 表現 ]
12+
[ 結果 ]
1222222222 # 全てマッチ 量指定のメタキャラに"?"を付加する事によって最小マッチとなる [ 表現 ]
12+?
[ 結果 ]
1222222222 # 2桁目までマッチ 指定内の任意の表現 【 " [ ] " 】
任意の二つの文字にマッチさせたい時や、複数の文字の中のいずれかにマッチさせたいと言った場合は " [ ] " で複数の候補を指定する事ができます。 下記のように指定することで、 a 又は b でマッチします。 [ a 又は b にマッチする ]
[ab]
小文字アルファベットであればマッチする表現を考えてみてください。 [ ] を使えば、 [abcd...z] で表現する事が出来ます。 しかし実際これでは非常長い表現になってしまい使い勝手が悪く、さらにはスペルミスも起こしかねません。 こんな時のために、「 小文字のアルファベット全て」 といった表現や、「 数値全て 」といった表現を省略して簡単に使う事が出来ます。（下図参照）
これまで紹介した例はある文字を一つを表現する方法でした。 下記のサンプルは 1文字だけではなく 文字列を表現する方法です。 文字列は [ | ] で区切って表現します。 [ 表現 ]
(this|that) is sample
[ 結果 ]
this is sample 又は that is sample にマッチします。 回数指定の表現
今まで見てきたメタキャラでは 0回以上や 1回以上といった指定しか出来ませんでした。 この様な場合 JavaScriptでは なるべくたくさんマッチしようとする [ 最長マッチ ] になりますが、？回にマッチや任意の数以上にマッチさせる回数指定の方法を見てみます。
[ 表現 ]
#[aaa] のみにマッチ a{3} #[aaa] , [aaaaaaaa] など3回以上連続する [a] にマッチ a{3,} 位置の指定 【 [^] [$] 】
今回は〜から始まる単語、〜で終わるといった単語のの表現方法になります。 〜から始まる単語という表現は単語の初めに [ ^ ] を付けます。 逆に 〜で終わっている単語と言う表現は、単語の最後に [ $ ] を付けます。 [ 表現 ]
#"abc"で始まっていたら ^abc #"abc"で終わっていたら abc$ [ 使用例 ]
W.*[T8]$ Windows 95 # マッチしない Windows 98 # マッチ Windows NT # マッチ 上記の正規表現は先頭が [ W ] で始まっていて最後が [ T ] 又は [ 8 ] で終わっていると言うことを表現しています。 そのため上の３つのサンプルでは先頭は全て [ W ] から始まっているので当てはまります。 しかし 最後が [ T ] 又は [ 8 ] と言う条件を "Windows 95" だけ満たしていませんのでマッチしないという訳です。
( 注１ デフォルトでは、数量子を付けたサブパターンは、「最長一致」となります、これは残りのパターンがマッチしなくならない範囲で、できる限り多くのものにマッチすると言う事です。つまり、標準の数量子は、すべて「最長一致」で、パターンが失敗しない範囲で可能な限り長い範囲にマッチさせます。 もし、最短の範囲でマッチさせたい時は、数量子の後に " ? "を付けると｢ 最短一致 ｣にする事が出来ます。（ 意味自体は変りません ） JavaScriptでの利用法
ここまでの説明で正規表現の概要は理解していただけたと思います。 ではここまで説明してきた正規表現を JavaScriptで実際に利用して、マッチする語句が含まれているか判別する方法をやってみます。
JavaScriptでは正規表現用にRegExpオブジェクトという正規表現用のオブジェクトがあります。これを使用する方法と、Perlなどと同じような方法の二通りのやり方が提供されていますので順に見てみます。 RegExpオブジェクトを使用した検索
[ sample ] [ source ]
<script language="JavaScript"> <!-- function func2(){ str = frm2.txtSrc2.value; rObj = new RegExp(frm2.txtObj2.value); if (str.match(rObj)) { alert(frm2.txtObj2.value+"を含んでいます。"); }else{ alert("マッチしません。"); } } //--> </script> <form name=frm2> <table cellpadding=5> <tr> <td>正規表現：</td><td><input name=txtObj2 type=textbox></td> </tr> <tr> <td>ソース：</td><td><input name=txtSrc2 type=textbox></td> </tr> <tr> <td colspan=2 align=center><input type=button value="比較" onClick="func2()"></td> </tr> </table> </form> RegExpオブジェクトrObjを新規で作成しています。このオブジェクトはあなたが正規表現：の入力ボックスで指定した表現になります。
rObj = new RegExp(frm2.txtObj2.value);
matchメソッドを使用します。このメソッドは文字列オブジェクトが持つメソッドで、一致する文字列があるか調べます。一致した文字(文字列)があった場合、一致した文字(文字列)を返します。第一引数に正規表現を記述することが可能です。今回は上で生成した正規表現のオブジェクトを引数として指定しましたが、引数として直に表現を記述することも可能です。
str.match(rObj)
RegExpを使用しない検索
[ sample ] [ source ]
<script language="JavaScript"> <!-- function func3(){ str = frm3.txtSrc3.value; if (str.match(frm3.txtObj3.value)) { alert(frm3.txtObj3.value+"を含んでいます。"); }else{ alert("マッチしません。"); } } //--> </script> <form name=frm3> <table cellpadding=5> <tr> <td>正規表現：</td><td><input name=txtObj3 type=textbox></td> </tr> <tr> <td>ソース：</td><td><input name=txtSrc3 type=textbox></td> </tr> <tr> <td colspan=2 align=center><input type=button value="比較" onClick="func3()"></td> </tr> </table> </form> 前回は一回オブジェクトを生成していましたが、今回は引数としていきなり表現を指定します。また、Perlにより近い以下2番目のような記述もすることが出来ます。
str.match(frm3.txtObj3.value)
str.match(/\w/) →数値一文字を表す
大文字と小文字の区別(iオプション)
JavaScriptが大文字小文字を区別するように正規表現でもデフォルトでは大文字と小文字を別として扱います。つまりアルファベットを記述したければa-zA-Zと二通りの指定をしなければ間違った指定になってしまいます。しかしJavaScriptもPerl同様にオプションをつけることによって大文字小文字を区別させないでマッチングすることが可能になります。
文字列.match(RegExpオブジェクト,"i") ; /パターン/i [ sample ] [ source ]
<script language="JavaScript"> <!-- function func3(){ str = "abc"; if(str.match(/ABC/)){ alert("オプション無し"); } if(str.match(/ABC/i)){ alert("オプション指定"); } } //--> </script> <form> <input type=button value=" ♂ " onClick="func3()"> </form> iオプションをつけてマッチングしています。これにより文字列が小文字の"abc"、検索対照が大文字の"ABC"となっていますがマッチすることが出来ます。
str.match(/ABC/i)
繰り返しのマッチング(gオプション)
matchメソッドは [ 一致した文字(文字列)があった場合、一致した文字(文字列)を返します ] と説明しましたが、一致する文字(文字列)が複数あった場合はどうなるのでしょう・・・・ こうなった場合は一番はじめに見つかった文字列が返されることになります。しかしマッチした文字列を全部知りたいといった場合にちょっと困ってしまいます。そんなときにこのオプションを利用すればマッチングした文字(文字列)を全て配列として取得することが出来ます。
文字列.match(RegExpオブジェクト,"g") ; /パターン/g [ sample ] [ source ]
<script language="JavaScript"> <!-- function func4(){ str = "123456789"; ret = str.match(/\w/g) alert("１番目：" + ret[0] + "\n" + "２番目：" + ret[1] + "\n" + "３番目：" + ret[2] + "\n" + "４番目：" + ret[3] + "\n" + "５番目：" + ret[4] + "\n" + "６番目：" + ret[5] + "\n" + "７番目：" + ret[6] + "\n" + "８番目：" + ret[7] + "\n" + "９番目：" + ret[8] + "\n"); } //--> </script> <form> <input type=button value=" ♂ " onClick="func4()"> </form> gオプションをつけてマッチングしています。これにより一回マッチングしても終了しないで全てに対してマッチングを行い、その結果を配列として戻すことになります。
ret = str.match(/\w/g)
RegExpオブジェクトignoreCaseプロパティ
マッチング時にiオプションが指定されているかを真か偽で返します。 [ source ]
<script language="JavaScript"> <!-- function ignoreCase(){ rObj = new RegExp("sample","i"); if(rObj.ignoreCase){ alert("iオプション指定"); }else{ alert("iオプション未指定"); } } //--> </script> <form> <input type=button value=" ♂ " onClick="ignoreCase()"> </form> オプションが指定されていれば真が、指定されていなければ偽が返ります。
rObj.ignoreCase
globalプロパティ
マッチング時に gオプションが指定されているかを真か偽で返します。 [ source ]
<script language="JavaScript"> <!-- function ignoreCase(){ rObj = new RegExp("sample","g"); if(rObj.global){ alert("gオプション指定"); }else{ alert("gオプション未指定"); } } //--> </script> <form> <input type=button value=" ♂ " onClick="global()"> </form> オプションが指定されていれば真が、指定されていなければ偽が返ります。
rObj.ignoreCase
lastMatchプロパティ
マッチング時に最後にマッチした文字(文字列)を返します。 [ sample ] [ source ]
<script language="JavaScript"> <!-- function lastmatch(){ str = "123456789"; ret = str.match(/\w/g); alert("lastMatch：" + RegExp.lastMatch + "\n" ); } //--> </script> <form> <input type=button value=" ♂ " onClick="lastmatch()"> </form> leftContextプロパティ
マッチング時に最後にマッチした文字 ( 文字列 ) の左側の文字列を返します。 [ sample ] [ source ]
<script language="JavaScript"> <!-- function leftContext(){ str = "123456789"; ret = str.match(/5/g); alert("leftContext：" + RegExp.leftContext + "\n" ); } //--> </script> <form> <input type=button value=" ♂ " onClick="leftContext()"> </form> rightContextプロパティ
マッチング時に最後にマッチした文字(文字列)の右側の文字列を返します。 [ sample ] [ source ]
<script language="JavaScript"> <!-- function rightContext(){ str = "123456789"; ret = str.match(/5/g); alert("rightContext：" + RegExp.rightContext + "\n" ); } //--> </script> <form> <input type=button value=" ♂ " onClick="rightContext()"> </form> |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||