【JavaScript】 matchとmatchAllの違い

JavaScriptには正規表現を使って文字列を検索するmatchというメソッドがあります。
このメソッドについては、次の記事で解説しました。

しかし似たようなメソッドでmatchAllというものがあります。

こちらについての解説を今回はお伝えします。

まずはmatchについて簡単におさらいをします。

matchは一致した文字列およびキャプチャグループを配列で取得できます。

console.log( "abcd123efg456".match( /([a-z])(\d+)/ ) );
  // [ "d123", "d" , "123" ]

"d123"が一致した文字列で、"d"と"123"はキャプチャグループです。

全ての一致を取得するために正規表現にgフラグを指定すると、一致した全ての文字列を配列で取得できます。

console.log( "abcd123efg456".match( /[a-z](\d+)/g) );
  // [ "d123", "g456" ]

"d123"と"g456"の二つの文字列が正規表現に一致しました。

しかし、キャプチャグループは消えてしまいました。

これは仕様のため、matchメソッドは最初の一致およびキャプチャグループを取得するか、キャプチャを諦めて一致した全ての文字列を取得するかのどちらかしかできません。

そのため、全ての一致とキャプチャグループを取得したいときは、以前はexecを使用していました。

matchAllは、execと同じように全ての一致文字列とキャプチャグループを取得できます。

matchAllを実行すると、キャプチャグループを含めた一致文字列を返すイテレーターが生成されます。

for( const match of "abcd123efg456".matchAll( /([a-z])(\d+)/g) )
        console.log( match );
// [ 'd123', 'd' , '123', index: 3, input: 'abcd123efg456', groups: undefined ]
// [ 'g456', 'g' , '456', index: 9, input: 'abcd123efg456', groups: undefined ]

上の例を実行すると二つの配列を返します。
inputやgroupsなど、配列なのにオブジェクトのように名前がついている要素があって少しおかしく感じますが、配列はArrayというオブジェクトです。
そのため、数値以外のプロパティを追加できます。

わかりやすいようにオブジェクト形式で表現すると、つぎのようになっています。

これならイメージをつかみやすいですね。