JavaScriptで正規表現を使う方法を知りたい。。。
「正規表現て何だろう」や「正規表現て難しそう」と感じている方は多いのではないでしょうか。
JavaScript に限らず、さまざまなプログラミング言語で登場する正規表現。
正規表現を使いこなせると、プログラミングの幅がぐっと広がります。
この記事では、JavaScript で正規表現を利用する方法について詳しくまとめています。ぜひ参考にしてみてください。
オススメの書籍
初心者向けのやさしい解説が特徴で、JavaScriptの書き方や使い方、アニメーションやイベントの知識などを学べる1冊です。1章から8章まであり、プログラミングの基本から実装方法までをカバーしています。Webサイトからはサンプルデータがダウンロードできます。JavaScriptを学びたい初心者から、最新の技術を学びたい人などにオススメです。
正規表現について
正規表現とは、特定の文字列をパターン化して記号で表現する手法のことで、テキストエディタやプログラミング言語などを扱う際に利用します。
普段使う文字（ａ～ｚ,Ａ～Ｚ）や数値（０～９）に加えて、メタ文字と呼ばれる特殊な記号を組み合わせることで、特定の意味を持った文字列になります。
メタ文字の例として、「+」や「*」などがあります。正規表現でこれらは加算や乗算という意味ではなく、別の意味を持ちます。「+」は直前の文字の１回以上の繰り返し、「*」は直前の文字を０回以上繰り返すという意味になります。
正規表現は、「文字列の中で特定の文字列を検索・置換したい時」や「ある文字列が特定の規則性があるか判定したい時」などに活躍します。
正規表現の使い方
正規表現を扱うには２通りの方法があります。
正規表現のリテラル記法
文字列が正規表現リテラルであることを明示する為に、両端をスラッシュで囲みます。
/ 正規表現の文字列 /
let pattern = /01+2/;これは後述するRegExpオブジェクトとして生成されます。
RegExpのコンストラクタ関数
通常は正規表現リテラルでも代用することができますが、正規表現のパターンを動的に生成する必要がある時は、コンストラクタによって明示することが可能です。
new RegExp(‘ 正規表現の文字列 ‘);
let pattern = new RegExp('01+2');この２つの書き方を使って、正規表現を扱います。
正規表現でよく使われるメタ文字
JavaScript の正規表現でよく使われるメタ文字とその意味についてご紹介します。
メタ文字の意味を知っておくことで、正規表現を作成できるようになります。
.（ドット）
任意の１文字（改行を除く）ともマッチします。
/.0/であれば、10、A0などにマッチします。0の前に1文字があることが重要です。
|（パイプ）
「|（パイプ）」の左右の文字列のいずれかにマッチします。
/012|345/であれば、012、345にマッチします。この例では2つの文字列を指定しましたが、「|」を組み合わせることで、複数の文字列とマッチさせることが可能です。
＾（カレット）
「＾（カレット）」は直後の文字が行の 先頭 にある場合にマッチします。
/＾0/であれば、0123という文字列の先頭である0にマッチします。1234ではマッチしません。
ここで注意したいのが、「＾（カレット）」は正規表現の文字列の先頭のものしかメタ文字として認識されません。
$（ドル）
「$（ドル）」は直前の文字が行の 末尾 にある場合にマッチします。
/0$/であれば、3210という文字列の末尾である0にマッチします。1234ではマッチしません。
＾（カレット）と同様に、正規表現の文字列の末尾のものしかメタ文字として認識されません。
*（アスタリスク）
直前の文字が０回以上繰り返す場合にマッチします。条件にあう最長の部分に一致します。
/01*2/の場合、012や02、01112にはマッチしますが、222にはマッチしません。
上記の例では、「*」の直前の文字は「１」となり、「１」が無いか１個以上連続するというパターンになります。
+（プラス）
直前の文字が１回以上繰り返す場合にマッチします。
/01+2/の場合、012、01112にはマッチしますが、222にはマッチしません。
上記の例では、「+」の直前の文字は「１」となり、１個以上連続するというパターンになります。
「*」とは異なり、最低でも「１」が１つないといけません。
?（クエスチョン）
直前の文字が０回または1回だけ出現する場合にマッチします。
/01?2/の場合、02、012にはマッチしますが、0112にはマッチしません。
「*」と「+」と「?」は、少しずつ意味が違うので、その違いを理解しておきましょう。
[]（括弧）
括弧の中の任意の文字とマッチします。
/[012]/の場合、0と1と2とマッチします。
また、「-」で範囲指定することが可能です。
/[0-9]/の場合、0から9までマッチします。
{n}
直前の文字n回の繰り返しとマッチします。
/[0-9]{3}/の場合、012、999にはマッチしますが、01、ABCにはマッチしません。数字が3桁連続していればマッチします。
{n,}
直前の文字n回以上の繰り返しとマッチします。
/[0-9]{3,}/の場合、012、999、0123にはマッチしますが、01、ABCにはマッチしません。数字が3桁以上連続していればマッチします。
{m,n}
直前の文字をm回からn回まで繰り返しとマッチします。
/[0-9]{1,3}/の場合、0、01、012にはマッチしますが、0123、ABCにはマッチしません。
「{n}」と「{n,}」と「{m,n}」は、少しずつ意味が違うので、その違いを理解しておきましょう。
JavaScriptで使う正規表現のメソッド
ここでは JavaScript で正規表現を実行するメソッドについて紹介します。
| メソッド | 説明 |
|---|---|
| match() | 対象文字列内で一致するパターンを検索し、検索結果を配列で返します。 |
| exec() | 対象文字列内で一致するパターンを検索し、検索結果を配列で返します。 |
| search() | 対象文字列内で一致するパターンがあるか検索し、一致した位置を返します。 |
| test() | 対象文字列内で一致するパターンを検索し、検索結果をtrueもしくはfalseで返します。 |
matchメソッド
正規表現を扱う場合によく使用されるのが「match()」です。対象の文字列から一致する文字列を配列にして返します。一致しない場合は null を返します。
またmatchメソッドはフラグの有無によってメソッドが返す配列の内容が変わります。フラグは２つありますので、抑えておきましょう。
| フラグ | 意味 |
|---|---|
| g フラグ | このフラグがあった場合、対象文字列と一致した全ての結果を配列にして返します。 フラグがなかった場合、最初に一致した文字列を配列にして返します。 |
| i フラグ | このフラグがあった場合、大文字と小文字の違いは無視されます。 フラグが無かった場合、大文字と小文字が識別されます。 |
次の例では、2回連続で数字が繰り返されるパターンを検出します。
gフラグを含んでいるので、マッチした全てを配列にして返します。
const str = 'M-1 2021';
const pattern = /[0-9]{2}/g;
const found = str.match(pattern);
console.log(found);実行結果は次の通りです。
// 20
// 21gフラグを含んでいない場合の結果は、配列の０番目に結果が格納されます。
const str = 'M-1 2021';
const pattern = /[0-9]{2}/;
const found = str.match(pattern);
console.log(found[0]);実行結果は次の通りです。
// 20後述するexecメソッドと同じ結果を返します。
execメソッド
対象の文字列の中で最初に一致した文字列を配列で返すのがexec()です。
lastIndexプロパティと組み合わせることで、パターンに一致する次の文字列を検索します。
次のサンプルは、testメソッドを使った例です。
const str = 'M-1 2021';
const pattern = /[0-9]{2}/g;
let array;
do{
array = pattern.exec(str);
console.log(array[0]);
console.log(pattern.lastIndex);
}
while(array !== null);実行結果は次の通りです。
// 20
// 6
// 21
// 8searchメソッド
対象の文字列の中で一致した文字列の位置を返すのがsearch()です。
一致した場合は文字列の先頭を０として、一致した部分まで数えた結果になります。一致しない場合はー１を返します。
次のソースコードがsearchメソッドを使った例です。
const str = 'M-1 2021';
const pattern = /[0-9]{2}/;
const found = str.search(pattern);
console.log(found);実行結果は次の通りです。
// 4testメソッド
対象の文字列が正規表現のパターンに一致するかどうかを判定するのがtest()です。
パターンに一致する場合は「true」、一致しない場合は「false」を返します。
次のソースコードがtestメソッドを使った例です。
const str = 'M-1 2021';
const pattern = /[0-9]{2}/;
const found = pattern.test(str);
console.log(found);実行結果は次の通りです。
// true対象の文字列の中にパターンに該当する文字列が複数存在する場合があります。
lastIndexプロパティと組み合わせてtestメソッドを数回呼び出しすることで、前回一致したところから先へ進んで検索をすることができます。
gフラグを含めて、testメソッドを3回呼び出してみましょう。
const str = 'M-1 2021';
const pattern = /[0-9]{2}/g;
for(let i = 0; i < 3; i++){
console.log(pattern.test(str));
console.log(pattern.lastIndex);
}実行結果は次の通りです。
// true
// 6
// true
// 8
// false
// 0testメソッドがfalseを返した場合は、リセットされます。
replaceメソッド
任意の文字列をある文字列に置換したい場合に使うのがreplace()です。
対象の文字列内に置換したい文字列が複数存在する場合、正規表現を使用しないと、最初の１箇所だけしか置換されません。
全て置換したいときは正規表現を用いて変換をします。
const str = 'M-1 2021, M-1 2022';
const pattern = /M-1/g;
const result = str.replace(pattern, 'R-1');
console.log(result);実行結果は次の通りです。
// R-1 2021, R-1 2022上記の例では、「M-1」から「R-1」へ全て置換をしています。ここでも全て変換をするので、gフラグを含めています。
splitメソッド
対象の文字列を任意の文字列で分割して配列で返すのがsplit()です。
splitメソッドの引数は正規表現を指定することが可能です。
次のソースコードはsplitメソッドを使用した例です。
const str = 'M-1 2021 M-1 2022';
const pattern = /\s/g;
const result = str.split(pattern);
console.log(result);実行結果は次の通りです。
// ['M-1', '2021', 'M-1', '2022']上記の例では空白で区切って配列を作成しています。正規表現で配列をしてするには「\s」と記述します。
よく利用する正規表現の代表例
ここでは、よく利用する正規表現について紹介します。
半角数値
対象の文字列が「半角数値のみ」であるかを判定する際に使えます。計算をする場合のエラーチェックなどでよく利用します。
/^[0-9]+$/
ちょっと解説をすると、先頭（^）の文字が数値（[0-9]）であるという意味になります。さらに数値が１回以上繰り返されている（+）、最後が数値である（＄）ことが条件になります。
この正規表現は空文字もはじくことが可能です。
半角英字
対象の文字列が「半角英字のみ」であるかを判定する際に使えます。半角英字の中に全角英字が混じっていないことを判定する場合に便利です。
/^[a-zA-Z]+$/
先頭（^）の文字が小文字と大文字の英字（[a-zA-Z]）であるという意味になります。さらに半角英字が１回以上繰り返されている（+）、最後が半角英字である（＄）ことが条件になります。
郵便番号
対象の文字列が「郵便番号」のフォーマットになっていることを判定する際に使えます。
/^\d{3}-\d{4}$/
郵便番号は○○○-○○○○で、○は半角数値でなければなりません。
先頭（^）の文字が数値（\d）であるという意味になります。バックスラッシュとd（\d）の組み合わせは [0-9] と同じ意味を持ちます。
次に{n}は直前の文字の桁数を制限しますので、{3}は3桁であること、{4}は4桁であるという意味になります。
電話番号
対象の文字列が「電話番号」のフォーマットになっていることを判定する際に使えます。
まずは -（ハイフン）がない場合です。
/^0\d{9,10}$/
先頭（^）の文字が０から始まり、半角数値が９桁もしくは１０桁（{9,10}）という意味になります。
次に-（ハイフン）がある場合です。
/^0\d{2,3}-\d{1,4}-\d{4}$/
先頭（^）の文字が０から始まり、半角数値が２桁もしくは３桁（{2,3}）で、-（ハイフン）で繋がって半角数値が1桁から4桁（{1,4}）、また -（ハイフン）で繋がって半角数値が4桁（{4}）であるという意味です。
まとめ
JavaScript で正規表現を利用する方法について詳しくまとめました。
正規表現のリテラル記法と RegExp のコンストラクタ関数の２種類があり、メソッドを活用することで JavaScript で正規表現を扱うことができます。
以上、最後まで読んでいただきありがとうございました。
関連記事
