JavaScript

【JavaScript】便利な正規表現の使い方を理解する

「正規表現て何だろう」や「正規表現て難しそう」と感じている方は多いのではないでしょうか。

JavaScriptに限らず、さまざまなプログラミング言語で登場する正規表現。

正規表現を使いこなせると、プログラミングの幅がぐっと広がります。

この記事では、JavaScriptで正規表現を利用する方法について詳しくまとめています。ぜひ参考にしてみてください。

正規表現について

正規表現とは、特定の文字列をパターン化して記号で表現する手法のことで、テキストエディタやプログラミング言語などを扱う際に利用します。

普段使う文字(a~z,A~Z)や数値(0~9)に加えて、メタ文字と呼ばれる特殊な記号を組み合わせることで、特定の意味を持った文字列になります。

メタ文字の例として、「+」や「*」などがあります。正規表現でこれらは加算や乗算という意味ではなく、別の意味を持ちます。「+」は直前の文字の1回以上の繰り返し、「*」は直前の文字を0回以上繰り返すという意味になります。

正規表現は、「文字列の中で特定の文字列を検索・置換したい時」や「ある文字列が特定の規則性があるか判定したい時」などに活躍します。

正規表現の使い方

正規表現を扱うには2通りの方法があります。

正規表現のリテラル記法

文字列が正規表現リテラルであることを明示する為に、両端をスラッシュで囲みます。

/ 正規表現の文字列 /

let pattern = /01+2/;

これは後述するRegExpオブジェクトとして生成されます。

RegExpのコンストラクタ関数

通常は正規表現リテラルでも代用することができますが、正規表現のパターンを動的に生成する必要がある時は、コンストラクタによって明示することが可能です。

new RegExp(‘ 正規表現の文字列 ‘);

let pattern = new RegExp('01+2');

この2つの書き方を使って、正規表現を扱います。

正規表現でよく使われるメタ文字

JavaScriptの正規表現でよく使われるメタ文字とその意味についてご紹介します。

メタ文字の意味を知っておくことで、正規表現を作成できるようになります。

1..(ドット)

任意の1文字(改行を除く)ともマッチします。

/.0/であれば、10A0などにマッチします。0の前に1文字があることが重要です。

2.|(パイプ)

「|(パイプ)」の左右の文字列のいずれかにマッチします。

/012|345/であれば、012345にマッチします。この例では2つの文字列を指定しましたが、「|」を組み合わせることで、複数の文字列とマッチさせることが可能です。

3.^(カレット)

「^(カレット)」は直後の文字が行の 先頭 にある場合にマッチします。

/^0/であれば、0123という文字列の先頭である0にマッチします。1234ではマッチしません。

ここで注意したいのが、「^(カレット)」は正規表現の文字列の先頭のものしかメタ文字として認識されません。

4.$(ドル)

「$(ドル)」は直前の文字が行の 末尾 にある場合にマッチします。

/0$/であれば、3210という文字列の末尾である0にマッチします。1234ではマッチしません。

^(カレット)と同様に、正規表現の文字列の末尾のものしかメタ文字として認識されません。

5.*(アスタリスク)

直前の文字が0回以上繰り返す場合にマッチします。条件にあう最長の部分に一致します。

/01*2/の場合、0120201112にはマッチしますが、222にはマッチしません。

上記の例では、「*」の直前の文字は「1」となり、「1」が無いか1個以上連続するというパターンになります。

6.+(プラス)

直前の文字が1回以上繰り返す場合にマッチします。

/01+2/の場合、01201112にはマッチしますが、222にはマッチしません。

上記の例では、「+」の直前の文字は「1」となり、1個以上連続するというパターンになります。

「*」とは異なり、最低でも「1」が1つないといけません。

7.?(クエスチョン)

直前の文字が0回または1回だけ出現する場合にマッチします。

/01?2/の場合、02012にはマッチしますが、0112にはマッチしません。

「*」と「+」と「?」は、少しずつ意味が違うので、その違いを理解しておきましょう。

8.[](括弧)

括弧の中の任意の文字とマッチします。

/[012]/の場合、012とマッチします。

また、「-」で範囲指定することが可能です。

/[0-9]/の場合、0から9までマッチします。

9.{n}

直前の文字n回の繰り返しとマッチします。

/[0-9]{3}/の場合、012999にはマッチしますが、01ABCにはマッチしません。数字が3桁連続していればマッチします。

10.{n,}

直前の文字n回以上の繰り返しとマッチします。

/[0-9]{3,}/の場合、0129990123にはマッチしますが、01ABCにはマッチしません。数字が3桁以上連続していればマッチします。

11.{m,n}

直前の文字をm回からn回まで繰り返しとマッチします。

/[0-9]{1,3}/の場合、001012にはマッチしますが、0123ABCにはマッチしません。

「{n}」と「{n,}」と「{m,n}」は、少しずつ意味が違うので、その違いを理解しておきましょう。

JavaScriptで使う正規表現のメソッド

ここではJavaScriptで正規表現を実行するメソッドについて紹介します。

メソッド説明
match()対象文字列内で一致するパターンを検索し、検索結果を配列で返します。
exec()対象文字列内で一致するパターンを検索し、検索結果を配列で返します。
search()対象文字列内で一致するパターンがあるか検索し、一致した位置を返します。
test()対象文字列内で一致するパターンを検索し、検索結果をtrueもしくはfalseで返します。

matchメソッド

正規表現を扱う場合によく使用されるのが「match()」です。対象の文字列から一致する文字列を配列にして返します。一致しない場合は null を返します。

またmatchメソッドはフラグの有無によってメソッドが返す配列の内容が変わります。フラグは2つありますので、抑えておきましょう。

フラグ意味
g フラグこのフラグがあった場合、対象文字列と一致した全ての結果を配列にして返します。
フラグがなかった場合、最初に一致した文字列を配列にして返します。
i フラグこのフラグがあった場合、大文字と小文字の違いは無視されます。
フラグが無かった場合、大文字と小文字が識別されます。

次の例では、2回連続で数字が繰り返されるパターンを検出します。

gフラグを含んでいるので、マッチした全てを配列にして返します。
const str = 'M-1 2021';
const pattern = /[0-9]{2}/g;
const found = str.match(pattern);
console.log(found);
実行結果
// 20
// 21
gフラグを含んでいない場合の結果は、配列の0番目に結果が格納されます。
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
// 8

searchメソッド

対象の文字列の中で一致した文字列の位置を返すのが「search()」です。

一致した場合は文字列の先頭を0として、一致した部分まで数えた結果になります。一致しない場合はー1を返します。

次のソースコードがsearchメソッドを使った例です。
const str = 'M-1 2021';
const pattern = /[0-9]{2}/; 
const found = str.search(pattern); 
console.log(found);
実行結果
// 4

testメソッド

対象の文字列が正規表現のパターンに一致するかどうかを判定するのが「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
// 0

testメソッドがfalseを返した場合は、リセットされます。

replaceメソッド

任意の文字列をある文字列に置換したい場合に使うのが「replace()」です。

対象の文字列内に置換したい文字列が複数存在する場合、正規表現を使用しないと、最初の1箇所だけしか置換されません。

全て置換したいときは正規表現を用いて変換をします。
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])であるという意味になります。さらに数値が1回以上繰り返されている(+)、最後が数値である($)ことが条件になります。

この正規表現は空文字もはじくことが可能です。

半角英字

対象の文字列が「半角英字のみ」であるかを判定する際に使えます。半角英字の中に全角英字が混じっていないことを判定する場合に便利です。

/^[a-zA-Z]+$/

先頭(^)の文字が小文字と大文字の英字([a-zA-Z])であるという意味になります。さらに半角英字が1回以上繰り返されている(+)、最後が半角英字である($)ことが条件になります。

郵便番号

対象の文字列が「郵便番号」のフォーマットになっていることを判定する際に使えます。

/^\d{3}-\d{4}$/

郵便番号は○○○-○○○○で、○は半角数値でなければなりません。

先頭(^)の文字が数値(\d)であるという意味になります。バックスラッシュとd(\d)の組み合わせは [0-9] と同じ意味を持ちます。

次に{n}は直前の文字の桁数を制限しますので、{3}は3桁であること、{4}は4桁であるという意味になります。

電話番号

対象の文字列が「電話番号」のフォーマットになっていることを判定する際に使えます。

まずは -(ハイフン)がない場合です。

/^0\d{9,10}$/

先頭(^)の文字が0から始まり、半角数値が9桁もしくは10桁({9,10})という意味になります。

次に-(ハイフン)がある場合です。

/^0\d{2,3}-\d{1,4}-\d{4}$/

先頭(^)の文字が0から始まり、半角数値が2桁もしくは3桁({2,3})で、-(ハイフン)で繋がって半角数値が1桁から4桁({1,4})、また -(ハイフン)で繋がって半角数値が4桁({4})であるという意味です。

まとめ

JavaScriptで正規表現を利用する方法について詳しくまとめました。

正規表現のリテラル記法とRegExpのコンストラクタ関数の2種類があり、メソッドを活用することでJavaScriptで正規表現を扱うことができます。

以上、最後まで読んでいただきありがとうございました。

関連記事

【JavaScript】配列(Array)の基本的な使い方を紹介!「JavaScriptで配列(Array)を使用するには?」JavaScript 初心者の方に配列の基本的な使い方を詳しくまとめました。使用頻度が高い JavaScriptの配列を初期化・追加・検索・展開・連想配列の使用方法について解説をしていますので、ぜひ参考にしてみてください。...
【JavaScript】forEachメソッドで配列の要素を取得する方法JavaScriptのforeachメソッドで配列の要素を取得・Indexの取得など使い方や使用例、メリットとデメリットなどを解説します。これからJavaScriptをはじめる初心者の方や復習をしたい方に向けて分かりやすく説明をしています。...
【JavaScript】新しい配列を生成するmapメソッドを理解するJavaScript のArrayオブジェクトの便利メソッド map() を利用してみましょう。mapメソッドは元の配列データをCallback関数で処理し、新しい配列として生成することができます。利用頻度が高いmapメソッドを理解して扱えるようになりましょう。...
【JavaScript】配列の繰り返し処理でfor文を扱う方法JavaScriptで for文 を使えば、配列の1つずつの要素に対して 繰り返して処理を実行できます。またループの回数を指定したり、break文や continue文で処理を中断、スキップができるので、より細かい制御をすることが可能です。...
【JavaScript】if文で条件分岐をしよう!使い方の基礎と注意点を解説JavaScriptの「if文」の基本的な使い方と注意点を解説した記事です。「if 文」や「else if」、「else」などを上手に使うことで複数の条件を組み合わせて複雑な分岐をすることが可能です。JavaScriptのプログラミングで必須の構文(if文)をマスターしましょう。...
プログラミングを学習したいなら…

プログラミングスキルを身に付けるなら、プログラミングを効率良く学べる
プログラミングスクール」がオススメです。

特にこんな方にオススメ!!
これからエンジニアを目指したい
プログラミングの専門性を高めたい
プログラミングを学んで副業をしたい
エンジニアに転職して年収をアップさせたい

プログラミングを触ったことがない未経験からでも、プログラミングスクールで学習すれば、エンジニアへ就職・転職することも可能です。

あなたの「行動力」と「やる気」で、あなたの人生を大きく変えるチャンスになることでしょう。

プログラミングスクールに興味がある方は是非チェックしてみてください。

> プログラミングを学ぶ <

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA