JavaScriptのmatchAllの使い方！文字列のマッチパターン取得

JavaScriptで文字列から使うことができるmatchAllメソッドについて書いています。

matchAllメソッドを使うと、文字列の中から特定のパターンに合致する部分をすべて取り出し、イテレータとして取得できます。
文字列処理を行う際に、特定のパターンにマッチする部分文字列をすべて取得したい場合に便利です。

実際に動くサンプルを使って、以下の操作を解説します。

matchAllメソッドの基本的な使い方

matchAllメソッドは、文字列の中に指定したパターンにマッチする部分文字列をすべて検索します。
そして、マッチした結果をイテレータとして返します。

基本的な構文は以下のとおりです。

string.matchAll(regexp)

• regexp: 検索する正規表現。
  • RegExpオブジェクト（必須）。
  • gフラグ（global flag）が必須です。
  • gフラグがない場合は、TypeErrorが発生します。

正規表現を使ってマッチする部分文字列をすべて抽出する

matchAllメソッドを使って、マッチする部分文字列をすべて抽出します。

const str = 'Hello World! Hello!';

const iterator = str.matchAll(/Hello/g);

for (const match of iterator) {
  console.log(match);
}
// 結果：
// ['Hello', index: 0, input: 'Hello World! Hello!', groups: undefined]
// ['Hello', index: 13, input: 'Hello World! Hello!', groups: undefined]

str変数に文字列を入れています。
そして、文字列の中に’Hello’という文字列がマッチするかどうかを正規表現を使って調べています。

gフラグ（global flag）を指定することで、文字列全体を検索し、マッチしたすべての部分文字列をイテレータとして取得しています。

matchAllメソッドの戻り値

matchAllメソッドの戻り値は、イテレータです。

イテレータをfor...ofループなどで反復処理することで、マッチした部分文字列を順番に取得できます。
また、各要素はmatchメソッドの戻り値と同様に、マッチした部分文字列、インデックス、入力文字列などを含む配列です。

イテレータが返ってくるので、下記のようにnextメソッドを使って、取り出すこともできます。

const str = 'こんにちは、世界！こんにちは';

const iterator = str.matchAll(/こんにちは/g);
const value1 = iterator.next().value;
console.log(`index: ${value1.index}`); // 結果： index: 0

const value2 = iterator.next().value;
console.log(`index: ${value2.index}`);  // 結果： index: 9

nextメソッドを使ってから、valueにアクセスすることで、マッチした内容を取得しています。
それぞれのインデックスをコンソールログで出力してみました。

matchメソッドとの違いは？

matchAllメソッドとmatchメソッドは、どちらも文字列が特定のパターンにマッチするかどうかを調べるために使用されます。
しかし、両者の間にはいくつかの違いがあります。

• 戻り値:
  • matchメソッドは、マッチした結果を配列またはnullとして返します。
  • matchAllメソッドは、マッチした結果をイテレータとして返します。
• gフラグ:
  • matchメソッドは、gフラグを指定しない場合は、最初にマッチした部分文字列のみを返します。
  • matchAllメソッドは、gフラグが必須です。

const str = 'Hello World! Hello!';

// match()メソッド
console.log(str.match(/Hello/)); // 結果：['Hello', index: 0, input: 'Hello World! Hello!', groups: undefined]
console.log(str.match(/Hello/g)); // 結果：['Hello', 'Hello']

// matchAll()メソッド
const iterator = str.matchAll(/Hello/g);
for (const match of iterator) {
  console.log(match);
}
// 結果：
// ['Hello', index: 0, input: 'Hello World! Hello!', groups: undefined]
// ['Hello', index: 13, input: 'Hello World! Hello!', groups: undefined]

console.log(str.matchAll(/Hello/)); // TypeError: String.prototype.matchAll called with a non-global RegExp argument

matchメソッドとmatchAllメソッドの戻り値とgフラグの扱い方の違いを比較しています。

matchメソッドは、gフラグがない場合は最初にマッチした部分文字列のみを返し、gフラグがある場合はマッチしたすべての部分文字列を配列として返します。
一方、matchAllメソッドは、gフラグが必須であり、マッチしたすべての部分文字列をイテレータとして返します。

matchAllメソッドにgフラグがない正規表現を渡すと、TypeErrorが発生しました。

JavaScriptのmatchAllメソッドの使い方まとめ

今回はJavaScriptのmatchAllメソッドの使い方について解説しました。
記事の内容をまとめます。