「HiFi RegExp Tool」を使って超高速に学ぶ正規表現入門。

先日『その場で動作させて確認する正規表現入門ツール「HiFi RegExp Tool」』として視覚的に動作が分かる正規表現ツールをご紹介しましたが、このツールを使った正規表現の入門実習を実際にしてみましょう。
入力してその場でマッチングされた文字がリアルタイムにハイライトするのですぐ効果が得られ、学習ツールとして非常に便利です。

HTML5では正規表現が使える、ということで、まだやってないというマークアップエンジニアやデザイナーの方、プログラミング勉強中な方は速攻でマスターしちゃいましょう。
HTML5以外でも、Windows用のエディタ等で文字列を一括置換したり、JavaScriptやPHP、Perlなどの言語でマッチングや置換に使えて覚えておいて損はありません。





ツールのURL: HiFi RegExp Tool

それでは実習にうつりましょう。

数字１文字以上
¥d は数字を表し、+ はそれを１文字以上、なので「¥d+」で試すと次のように、100がマッチします。



逆に、数字以外、にするには、「¥D+」のように大文字にするだけです。
実際に試してみてください。

英数字１文字以上
同じように、数字ではなくアルファベットをマッチさせてみます。
上では、数字の ¥d を使いましたが、今度は ¥w とすれば英数字を現すことが出来ます。+が続くと１文字以上にマッチするので画面がまっ黄色になりますね



ここも、逆に英数字以外にするには、「¥W+」のように大文字のWを使ってあげてください。

他にも で始まるものでは次のようなものがよく使われます。
¥s - スペース
¥S - スペース以外
¥t - タブ

実際に動かして試してみましょう。

何かの文字１文字以上
数字は ¥d 、英数字は ¥w 、ではもっと範囲を広げてみましょう。 . (ドット) はもっと範囲が広がって任意の１文字、になります。
つまり、なんにでもマッチします。上と比べてみると、スペースや%といった文字がマッチしていませんが、今度は完全に全てマッチしちゃってます。



. は何にでもマッチするという特性を活かして、「t..l」のように入力すると次のようにtoolにマッチしました。
文中に teel とか taal があっても、t..l ならマッチングさせることが出来ます。



.(ドット)自体をマッチさせる
ドットは任意の１文字ですが、. 自体をマッチさせたい場合は ¥でエスケープして「¥.」としてください。



基本、こうした正規表現に関係する文字自体をマッチングさせる場合は ¥ でエスケープしてあげてください。

好きな文字を１文字以上
これまでは範囲が広すぎました。今度は絞ってみていきましょう。
[ と ] で囲うと、自分が好きな文字を指定できます。[abc] として aとbとcを指定しています。では、[abc]+とするとどうなるでしょう。
次のようになります。aかbかcかが１文字以上なので、ca とか a とか b がマッチしていますね。



[] で囲うのを文字クラスといいます。[] の最初に ^ を入れると、その逆、が指定できます。[^abc]+
やってみると、a,b,c以外が１文字以上ということで一杯マッチします。



文字クラスは、範囲で指定することも出来て、[a-f] のようにやると、[abcdef] と等価になります。数字も同様に [1-6] と書けば [123456] と等価になります。
更に、[a-zA-Z0-9] のような書き方も可能です。

０文字以上１文字以下のあってもなくてもよいものマッチング
apple とか apples にマッチさせたいとき、apples? のように ? を指定しておいて上げれば、s があってもなくてもよいことになります。



apple, apples にマッチしました。

○文字以上、○文字以下
これまで１文字以上、がベースでしたが、今度は範囲をせばめてみましょう。
{最低文字数, 最大文字数} のように中括弧で囲ってあげれば簡単に文字数の指定ができます。
次は、Go{3,7}gle として、o の文字数を3文字以上、7文字以下として指定しています。



o の数を調整したGoogleで、どれがマッチしているか、一目瞭然ですね。3, 7 の部分を調整して色々遊んでみましょう。
更に、○文字以上、の指定だけすることもできて、{3,} のように,の後に何も書かなければ３文字以上になります。一度やってみてください。

複数の文字からなる文字列をグルーピング
(Apple|Orange) のように、() で囲って | で区切るとApple あるいは Orange にマッチさせることが出来ます。
(Apple|Orange) is delicious としてマッチさせた例が以下です。



文字列の最初や最後にマッチさせる

文字列の最初にマッチさせたい場合は、^ を最初に付けます。^を付けることで最初にだけマッチします。
最初のうちは文字クラスの否定の [^abcdef] と勘違いしやすいので注意が必要です。



^ がなかったらどうなるか？最初でない部分の Reg にもマッチしますね。



では文字の最後についても見てみましょう。
最後にマッチさせるには、$ を末尾に付けます。
joy!$ で末尾の joy! がマッチしていることが分かりますね。


$ がない場合は、末尾ではない部分にもマッチしますね。



といった感じで正規表現の基本部分について説明してみました。
あとは、マッチング対象の文章もいじれるので、適当に文書を入れたりして遊んでいるうちに覚えられそうです。

このツールは、入力してすぐに結果が分かるところが楽しくてストレスフリーでいいですね。

これらは基本ですが、これだけマスターすれば、ある程度の正規表現については見て理解できるレベルになってるはずです。
このレベルでもWindowsのエディタとかで正規表現置換とかをして置換の作業を圧倒的に便利にすることが出来たり、PHP等の言語で実際にある程度、使うことも出来るでしょう。

過去にも同様の、PHPやJavaScript でそのまま使えるリアルタイム正規表現チェッカーをご紹介しましたのでこちらも併せてどうぞ。

Rex V: an AJAX Regular EXpression eValuator -