> 作業効率UP!! オススメのモバイルモニターを紹介

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

当ページのリンクには広告が含まれています。
  • URLをコピーしました!

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

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)の基本的な使い方を紹介! プログラミングでデータを格納する方法として「配列(Array)」というものがあります。 複数のデータを1度に扱うとき、効率よくデータを操作することができるので、とて...
あわせて読みたい
【JavaScript】forEachメソッドで配列の要素を取得する方法 javaScriptの配列を繰り返して処理する方法として、forEachメソッドがあります。 今回はforEachメソッドの使い方をはじめ、メリットや使うにあたってのポイントや注意点...
あわせて読みたい
【JavaScript】新しい配列を生成するmapメソッドを理解する JavaScriptでは配列の処理を行うメソッドとして、map() が頻繁に使用されています。 このmapメソッドは与えられた関数を配列データの全要素に対して実行し、その結果を...
あわせて読みたい
【JavaScript】配列の繰り返し処理でfor文を扱う方法 JavaScriptで条件に応じて繰り返しの処理をするために用意されているのが for文です。 for文は基本となる構文ですが、使い方を間違えるとfor文から抜け出すことができず...
あわせて読みたい
【JavaScript】if文で条件分岐をしよう!使い方の基礎と注意点を解説 条件分岐はさまざまなプログラミング言語でよく使われる基本です。JavaScriptの場合は「if文」を使った条件分岐が最も使われます。 本記事では、JavaScriptで扱う「if文...
よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

記事の内容