【JavaScript】正規表現と一致する部分を抽出する！matchメソッドの使い方！

この記事ではJavaScriptの『matchメソッド』について、以下の内容をサンプルコードを用いて分かりやすく説明するように心掛けています。ご参考になれば幸いです。

• matchメソッドとは
• matchメソッドの構文
• matchメソッドの使い方
  • 正規表現全体に一致したすべての結果を抽出する方法
  • グローバルフラグ(g)を設定しない場合の使い方
  • 大文字と小文字を区別しないiフラグを設定する場合の使い方
  • キャプチャグループを使用する場合の使い方
• matchメソッドの特徴
  • 引数を与えない場合、空文字列1つを持つ配列が返り値になる

matchメソッドとは

JavaScriptのmatchメソッドは、対象の文字列が正規表現と一致する部分を抽出するメソッドです。一致した部分が見つかった場合、その部分の文字列を含む配列を返します。一致しなかった場合にはnullを返します。

matchメソッドの構文を以下に示します。

str.match(regexObj)

matchメソッドの使い方

matchメソッドについて、以下に示している使い方をこれから説明します。

• 正規表現全体に一致したすべての結果を抽出する方法
• グローバルフラグ(g)を設定しない場合の使い方
• 大文字と小文字を区別しないiフラグを設定する場合の使い方
• キャプチャグループを使用する場合の使い方

上記の使い方について順番に説明します。

正規表現全体に一致したすべての結果を抽出する

JavaScriptのmatchメソッドを用いたサンプルコードを以下に示します。

// グローバルフラグ(g)を設定した正規表現オブジェクト
const regexObj = /[A-E]/g;
// RegExpコンストラクタを用いる場合には以下の様に記述する
// const regexObj = new RegExp('[A-E]', 'g');

// テストする文字列
const str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';

// 文字列に含まれる'A'から'E'までの文字を抽出
const matches = str.match(regexObj);
console.log(matches);

// ログ出力
// ['A', 'B', 'C', 'D', 'E']

上記のサンプルコードでは、文字列strに'A'から'E'までの文字が含まれているかを調べています。

まず、正規表現オブジェクトを作成します。正規表現オブジェクトはリテラル(/pattern/)またはRegExpコンストラクタ(new RegExp('pattern'))を使って作成します。どちらの方法でも構いません。

次に、対象の文字列strに対してmatchメソッドを呼び出し、正規表現オブジェクトregexObjを引数として渡します。

上記のサンプルコードの場合、正規表現/[A-E]/gに一致する文字は'A'から'E'までの文字です。グローバルフラグ(g)が設定されているため、正規表現全体に一致したすべての結果が抽出され、配列に格納されます。

グローバルフラグ(g)を設定しない場合の使い方

正規表現のパターンにグローバルフラグ(g)を設定しない場合、最初に一致した部分だけが抽出されます。

以下にサンプルコードを示します。

// グローバルフラグ(g)を設定しない正規表現オブジェクト
const regexObj = /[A-E]/;
// RegExpコンストラクタを用いる場合には以下の様に記述する
// const regexObj = new RegExp('[A-E]');

// テストする文字列
const str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';

// 最初の一致部分を抽出
const matches = str.match(regexObj);
console.log(matches);

// ログ出力
// [
//   'A',
//   index: 0,
//   input: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
//   groups: undefined
// ]

このサンプルコードでは、/[A-E]/という正規表現オブジェクトregexObjを作成し、対象の文字列strに対してmatchメソッドを実行しています。グローバルフラグ(g)が設定されていないため、最初に一致した部分(今回の場合は'A')と、最初に一致した部分に関するキャプチャグループが返り値となります。

// グローバルフラグ(g)を設定しない正規表現オブジェクト
const regexObj = /[A-E]/;

// テストする文字列
const str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';

// 一致部分を抽出
const matches = regexObj.exec(str);
console.log(matches);

// ログ出力
// [
//   'A',
//   index: 0,
//   input: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
//   groups: undefined
// ]

大文字と小文字を区別しないiフラグを設定する場合の使い方

正規表現のパターンの最後にiを記述すると、大文字と小文字を区別しないフラグを設定することができます。

以下にサンプルコードを示します。

// 大文字と小文字を区別しないフラグを設定した正規表現オブジェクト
const regexObj = /[A-E]/gi;

// テストする文字列
const str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';

// 一致部分を抽出
const matches = str.match(regexObj);
console.log(matches); 

// ログ出力
// ['A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e']

このサンプルコードでは、/[A-E]/giという正規表現オブジェクトregexObjを作成し、対象の文字列strに対してmatchメソッドを実行しています。iが設定されているため、大文字と小文字を区別せず、かつグローバルフラグ(g)が設定されているため、正規表現全体に一致したすべての結果が抽出され、配列に格納されます。

キャプチャグループを使用する場合の使い方

正規表現のキャプチャグループを使用することで、一致した部分全体とそのサブパートを配列として取得できます。

以下にサンプルコードを示します。

// キャプチャグループを含む正規表現オブジェクト(グローバルフラグなし)
const regexObj = /(\d{3})-(\d{4})/;

// テストする文字列
const str = '郵便番号: 123-4567 です。';

// 一致部分を抽出
const matches = str.match(regexObj);
console.log(matches); 

// ログ出力
// [
//   '123-4567',
//   '123',
//   '4567',
//   index: 6,
//   input: '郵便番号: 123-4567 です。',
//   groups: undefined
// ]

このサンプルコードでは、/(\d{3})-(\d{4})/という正規表現オブジェクトregexObjを作成しており、正規表現にキャプチャグループを含めています。matchメソッドを実行すると、一致した部分全体とキャプチャグループに一致する部分が配列に格納されます。

ここでは、matches[0]に一致した部分全体、matches[1]に最初のキャプチャグループに一致した部分、matches[2]に二番目のキャプチャグループに一致した部分が含まれています。

正規表現にキャプチャグループを含めている場合において、グローバルフラグ(g)を設定すると、キャプチャグループは返されません。以下にサンプルコードを示します。

// キャプチャグループを含む正規表現オブジェクト（グローバルフラグを使用）
const regexObj = /(\d{3})-(\d{4})/g;

// テストする文字列
const str = '郵便番号: 123-4567 です。郵便番号: 987-6543 です。';

// 一致部分を抽出
const matches = str.match(regexObj);
console.log(matches); 

// ログ出力
// ["123-4567", "987-6543"]

このサンプルコードでは、正規表現/(\d{3})-(\d{4})/gに対してmatch()メソッドを実行しています。グローバルフラグ(g)が設定されているため、文字列中の一致部分全体が抽出されますが、キャプチャグループは返されません。

正規表現にキャプチャグループを含めている場合において、グローバルフラグ(g)を設定する場合は、RegExp.prototype.exec()を使用することをおすすめします。以下にサンプルコードを示します。

// グローバルフラグを設定した正規表現オブジェクト
const regexObj = /(\d{3})-(\d{4})/g;

// テストする文字列
const str = '郵便番号: 123-4567 です。郵便番号: 987-6543 です。';
let matches;
while ((matches = regexObj.exec(str)) !== null) {
  console.log(matches);
}

// ログ出力
// [
//   '123-4567',
//   '123',
//   '4567',
//   index: 6,
//   input: '郵便番号: 123-4567 です。郵便番号: 987-6543 です。',
//   groups: undefined
// ]
// [
//   '987-6543',
//   '987',
//   '6543',
//   index: 24,
//   input: '郵便番号: 123-4567 です。郵便番号: 987-6543 です。',
//   groups: undefined
// ]

このサンプルコードでは、正規表現/(\d{3})-(\d{4})/gに対してexecメソッドを繰り返し呼び出すことで、文字列中のすべての一致部分とそのキャプチャグループを抽出しています。

matchメソッドの特徴

matchメソッドの特徴を以下に示します。

• 引数を与えない場合、空文字列1つを持つ配列が返り値になる

上記の特長について順番に説明します。

引数を与えない場合、空文字列1つを持つ配列が返り値になる

matchメソッドの引数を与えない場合、空文字列1つを持つ配列が返り値になります。これは、引数なしでmatchメソッドを呼び出すと、デフォルトで/(?:)/という空の正規表現が使用されるためです。空の正規表現は、文字列の最初に一致するため、結果として空文字列を1つ持つ配列が返されます。

サンプルコードを以下に示します。

// 引数を与えずにmatch()メソッドを使用
const str = 'Hello';
const matches = str.match(); // match(/(?:)/) と同じ
console.log(matches); 
// ログ出力
// [ '', index: 0, input: 'Hello', groups: undefined ]

グローバルフラグ(g)が設定されていないため、最初に一致した部分(今回の場合は'')と、最初に一致した部分に関するキャプチャグループが返り値となります。

本記事のまとめ

この記事ではJavaScriptの『matchメソッド』について、以下の内容を説明しました。

• matchメソッドとは
• matchメソッドの構文
• matchメソッドの使い方
  • 正規表現全体に一致したすべての結果を抽出する方法
  • グローバルフラグ(g)を設定しない場合の使い方
  • 大文字と小文字を区別しないiフラグを設定する場合の使い方
  • キャプチャグループを使用する場合の使い方
• matchメソッドの特徴
  • 引数を与えない場合、空文字列1つを持つ配列が返り値になる

お読み頂きありがとうございました。