【JavaScript】正規表現で文字列をマッチできるメソッドまとめ

JavaScriptで文字列を正規表現でマッチさせるメソッドはいくつかあります。

代表的なのはmatchメソッドで正規表現内のカッコを含めたマッチが可能です。

しかし実はそれ以外にも正規表現が使えるマッチ系のメソッドはあります。

という訳でそれらのメソッドの使い方についてコード例と一緒に解説

このページの目次

マッチ系メソッドまとめ
- String.prototype.matchメソッド
  - カッコで補足したマッチ結果を受け取るには
- RegExp.prototype.exec
もし正規表現のテストだけをしたい場合は
正規表現の関連記事
- JavaScriptで正規表現を表す２つの方法とパフォーマンス的な違い
- 正規表現の内部処理が分かる便利ツールregex101を使ってみた
ここまでのまとめ

マッチ系メソッドまとめ

そのメソッドというのが次の２つ

String.prototype.match
RegExp.prototype.exec

Stringオブジェクトのmathcメソッドはよく使われるし有名ですよね。

ですが実は正規表現オブジェクトでもexecメソッドを使えばマッチ処理ができます。

これら２つのメソッドの詳しい使い方は次の通り

String.prototype.matchメソッド

これは文字列に対してある正規表現のマッチング結果を受け取るためのメソッド

次のように文字列 str に対して正規表現オブジェクト regexp を渡して使います。

str.match(regexp);

1	str.match(regexp);

そして文字列がマッチした場合、マッチング結果の配列を返してきます。

配列の中身は最初に一致した全体の文字列、その後にカッコで補足された内容が続くような感じ

ちなみにマッチが見つからなかった場合は null が返されるようです。

具体的な使い方ですが、例えば次が簡単なコード例

var str = 'blueberry';
var regexp = /\w+berry/;

var matched = str.match(regexp);
console.log(matched[0]);
  /// => blueberry

var str = 'blueberry';

var regexp = /\w+berry/;

var matched = str.match(regexp);

console.log(matched[0]);

/// => blueberry

'blueberry' という文字列に /\w+berry/ の正規表現をマッチさせ、マッチした文字列全体 matched[0] をコンソールに表示しているコードです。

これが超基本的な使い方

それに加え、matchではカッコで補足することでマッチング結果全てを受け取れます。

カッコで補足したマッチ結果を受け取るには

もし文字列の個別の部分だけマッチさせたい場合、

正規表現でカッコ () を使えばその部分だけ抜き取ることができます。

例えば次がカッコを使った正規表現マッチングの例

var str = 'blueberry';
var regexp = /(blue|black)berry/;

var matched = str.match(regexp);
console.log(matched[1]);
  /// => blue

var str = 'blueberry';

var regexp = /(blue|black)berry/;

var matched = str.match(regexp);

console.log(matched[1]);

/// => blue

コード中の正規表現 regexp は 'blueberry' または 'blackberry' にマッチします。

そして返される配列のインデックス１番目以降にカッコで補足した内容が入ります。

上の例だとカッコは単独ですが入れ子にすることも可能です。

例えば次は正規表現のカッコが入れ子になっているコード例

var str = 'blueberry pie';
var regexp = /((blue|rasp)berry) pie/;

var matched = str.match(regexp);
console.log(matched[1]);
  /// => blueberry
console.log(matched[2]);
  /// => blue

var str = 'blueberry pie';

var regexp = /((blue|rasp)berry) pie/;

var matched = str.match(regexp);

console.log(matched[1]);

/// => blueberry

console.log(matched[2]);

/// => blue

上のコードでマッチング結果を表す配列 matched の

インデックス１番目には ((blue|rasp)berry) のマッチ結果、
インデックス２番目には (blue|rasp) のマッチ結果

が入って返されます。

こういう風に入れ子になっていた場合は外側から内側の順番で結果が返されます。

またさらに複雑な場合は入れ子を並列にした上で入れ子にする場合もあり

例えば次は /((blue|rasp)berry) (pie|cake)/ という正規表現を使ってマッチしているコード例

var str = 'blueberry cake';
var regexp = /((blue|rasp)berry) (pie|cake)/;

var matched = str.match(regexp);
console.log(matched[1]);
  /// => blueberry
console.log(matched[2]);
  /// => blue
console.log(matched[3]);
  /// => cake

var str = 'blueberry cake';

var regexp = /((blue|rasp)berry) (pie|cake)/;

var matched = str.match(regexp);

console.log(matched[1]);

/// => blueberry

console.log(matched[2]);

/// => blue

console.log(matched[3]);

/// => cake

上のコードを見ればわかるようにカッコで補足された内容は

並列だった場合は左から右の順番
入れ子なら外側から内側の順番

という風に解析されてマッチング結果に入ります。

以上がmatchを使ったマッチングのやり方

カッコで補足された内容まで受け取れるのでコードをスマートに書くのに便利です。

RegExp.prototype.exec

これは正規表現オブジェクトから文字列に対してマッチを実行するメソッド

例えば正規表現オブジェクト regexp に対して文字列 str を渡して使います。

regexp.exec(str);

1	regexp.exec(str);

ちょうどさっきのmatchメソッドの逆バージョンみたいな感じですね。

そしてこのメソッドもそれと同じようにマッチ結果の配列を返してきます。

またマッチするものがない場合は null が返ってくる模様

使い方ですが、例えば次は文字列全体をマッチさせているコード例

var str = 'blueberry';
var regexp = /\w+berry/;
  
var matched = regexp.exec(str);
console.log(matched[0]);

var str = 'blueberry';

var regexp = /\w+berry/;

var matched = regexp.exec(str);

console.log(matched[0]);

execメソッドでも返される配列の最初にマッチ文字列全体が入っています。

そして次がカッコで補足した内容を受け取っているコード例

var str = 'blueberry cake';
var regexp = /((blue|rasp)berry) (pie|cake)/;

var matched = regexp.exec(str);;
console.log(matched[1]);
  /// => blueberry
console.log(matched[2]);
  /// => blue
console.log(matched[3]);
  /// => cake