「JavaScriptの正規表現ってなに？」
「JavaScriptの正規表現の具体的な活用方法が知りたい！」
「JavaScriptの正規表現で使用するメソッドって？」
この記事ではこのような疑問に答えていきます。
JavaScriptを学習していると必ず通らなくてはいけないのが、正規表現の学習です。学習者のかたは、出てきて、なんとなく意味は理解したつもりでも理解できていないことが多かったりしますよね。
そこで、今回は、JavaScriptの正規表現とは一体どんなモノなのか、また、とくに使われる特殊文字やメソッドなどのテクニック的な部分についての解説も行なっていきます。
JavaScriptの正規表現とは？基本的な使い方も！
正規表現は、特殊文字と特殊文字を組み合わせて「パターン」を作ることによって、パターンに適合した特定の文字を取り出すことが出来るようになることです。
少し難しいかもしれないので、以下に例を作成しました。
正規表現のパターン例
/p{2}/
上記は正規表現のパターン例の1つなのですが、「2個以上の”p”の組み合わせ」にマッチする正規表現です。
例えば、Appleという単語は、ppと２つ続いているpの組み合わせがあるので、/p{2}/という正規表現はまさにこのパターンを表した文字列と言うことになるのです。
これがもしAprilという単語だとしたら、pは１つしかないので、/p{2}/には当てはまりません。
このように、パターンに適合した特定の文字列を取り出すことが出来るようになることを「正規表現」と定義していて、この「取り出すこと」を「マッチする」と表現しています。
JavaScriptの正規表現でよく使われる記号と意味
基本的に正規表現では、「/記号/」のように「/（スラッシュ）」の中に入れていきます。これは基本的な決まりなので覚えておくといいでしょう。
以下では、JavaScriptの正規表現でよく使われる記号と意味についてご紹介しています。パターンを覚えてしまえば簡単なので、覚えておきましょう。
1. ^(カレット)
「^（カレット）」は入力の先頭にマッチします。
/^a/ であれば、abcという文字列の先頭であるaにマッチします。
cbaでは反応しません。
2. $(ドル)
入力の末尾にマッチします。
/a$/であれば、bcaには最後の文字aがマッチしますが、acbにはマッチしません。
3. *（アスタリスク）
直前の0回以上の繰り返しにマッチします。
/ab*/であれば、aまたはabbbb...にマッチしますが、bbbbにはマッチしません。
4. [ ]
カッコの中の任意の1文字と一致します。「-」で範囲指定も可能です。
/[a-z]/であれば、a~zまでの全てのアルファベットにマッチします。
5. +（プラス）
直前の文字の一回以上の繰り返しにマッチします。
/ab+/なら、ab、abbb….にマッチしますが、bbbb...にはマッチしません。
6. ?（クエスチョン）
直前の文字の0回もしくは、1回の出現にマッチします。
/hoge?/なら、hoge、hogにマッチしますが、hogeeeeにはhogeにのみ部分的にマッチし、続くeeeにはマッチしません。
7. {n}
直前の文字n個の繰り返しとマッチします。
[0-9]{3}は3桁の数字
8. {n,}
直前の文字n個以上の繰り返しとマッチします。
[0-9]{3,}は３桁以上の数字
9. {m,n}
直前の文字をm~n回と一致します。
[0-9]{3,5}は3~5桁の数字
10. .（ドット）
改行文字以外のどの1文字にもマッチします。
/.n/なら、\narrow street was on an appleのon anのnにはマッチしますが、narrowのnは改行文字の一部なのでマッチしません。
正規表現で使うメソッドについて
今回は、JavaScriptの正規表現で使用する３つのメソッドについてご紹介していきます。
1. matchメソッド
正規表現で非常によく使われるメソッドです。
matchはStringオブジェクトの組み込みメソッドであり、文字列を検索するのに優れた機能を持っています。
【使用例】
var users = 'user-0, user1, users-d, myuser';
var regexp = new RegExp(/user-\d/, 'g');
var result = users.match(regexp);
console.log(result[0]);
【実行結果】
user-0
この場合、正規表現パターンを利用して、var regexp = new RegExp(/user-\d/);のところで、「user-」から始まる文字列のパターンを検出しています。
「\d」は数字を示していて、「[0-9]」と同義の正規表現です。正規表現の「g」は、グローバルサーチを行うオプションフラグで、全体の文字列全てを見て、マッチを返しています。
つまり「user-数字」から始まる文字列は「user-0」だけなので、実行するとこのような結果になるわけです。
2. searchメソッド
【使用例】
var str = 'user-12, user-John, user-Mary, user-672';
var result = str.search( /user-\d{3}/ );
console.log( result );
【実行結果】
31
この場合、まず数人分のユーザー名をstrに格納しています。
その後、正規表現パターン/user-\d{3}/とsearchメソッドを利用して、user-から始まる3桁の数字をもつユーザーを検出出来るようにしているわけです。
user-3桁の数字という形になっているのは、user-672だけです。この時のuser-672の位置が文字列の頭（0から数えて）から31文字目にきているので、実行結果は31となります。
3. testメソッド
testメソッドは、正規表現に合致するパターンを「true/false」のどっちかでチェックすることが可能です。
【使用例】
var regexp = new RegExp(/^\d{2}$/);
var result1 = regexp.test(8);
var result2 = regexp.test(12);
console.log('8 = ^\d{2}$は' + result1);
console.log('12 = ^\d{2}$は' + result2);
【実行結果】
8 = ^d{2}$はfalse
12 = ^d{2}$はtrue
この場合は、/^\d{2}$/で2桁の値だけ検出するように指定しているのがポイントです。test()では、「8」「12」の2つをチェックするようにしていて、8と12では、12の方がtrue。8は1桁の数字なので、falseと結果が出るようになっています。
まとめ
今回は、JavaScriptにおける「正規表現」について主にご紹介してきました。学習の始めたては今回紹介したような特殊文字だったり、メソッドだったりが使いにくい部分が多いかと思います。
しかし、慣れてくると、誰でもスムーズに使用出来るようになってくるものです。学習書にある内容などをよく読んで、もっと詳しく学習しても分かりやすいかもしれないので、こういった基礎的な知識をしっかり入れて、JavaScriptをマスターしていきましょう。
TECH PLAYでは、エンジニアの方向けに勉強会・イベント情報を提供しています。
ご興味のある方はぜひご参加ください。
