JavaScript 逆引き集 | 正規表現で部分抽出(キャプチャ)

JavaScript JavaScript
スポンサーリンク
スポンサーリンク

「マッチした中の一部分だけを取り出す」という発想

const [, p] = s.match(/(foo)/) は、文字列の中から正規表現にマッチした部分を取り、その中でも「丸括弧で囲んだ部分だけ」を変数に取り出す書き方です。 ここで主役になるのが、(foo) という「キャプチャグループ」と、match の戻り値の配列構造、そして分割代入 const [, p] = ... です。

キャプチャグループとは何か

/(foo)/ のように、パターンを丸括弧 () で囲むと、その部分が「キャプチャグループ」になります。 キャプチャグループは、「ここにマッチした文字列を覚えておいて、あとから取り出せるようにする印」だと思ってください。

例を見ます。

const s = "bar foo baz";
const m = s.match(/(foo)/);

console.log(m);
// ["foo", "foo"]
JavaScript

m は配列で、 先頭の m[0] が「全体のマッチ(今回だと ‘foo’)」、 次の m[1] が「1番目のキャプチャグループにマッチした部分(これも ‘foo’)」です。

キャプチャグループが増えると、m[2], m[3]…と続いていきます。

分割代入で「欲しい部分だけ」抜き出す

const [, p] = s.match(/(foo)/) は、この配列から「2番目の要素だけ欲しい」という意図を、分割代入で表現したものです。

const s = "bar foo baz";
const [, p] = s.match(/(foo)/);

console.log(p); // "foo"
JavaScript

[, p] という書き方は、 最初の要素(インデックス 0)は捨てて、 2番目の要素(インデックス 1)を p に代入する、という意味になります。

これによって、「キャプチャした部分だけを、直接変数として受け取る」ことができます。

もう少し実務寄りの例:数字だけキャプチャする

キャプチャグループは、固定文字列だけでなく「パターン」にも使えます。

const s = "ID: 12345";
const m = s.match(/ID:\s*(\d+)/);

const [, id] = m;

console.log(id); // "12345"
JavaScript

ここでは、

ID:\s* が「ID: とその後の空白」を表す部分。 (\d+) が「1文字以上の数字」をキャプチャするグループ。

match の結果は ["ID: 12345", "12345"] のような配列になり、 分割代入で id"12345" が入ります。

こうして、「文字列から意味のある値だけを抜き出して、変数として扱う」ことができます。

マッチしなかったときの注意点

match は、パターンにマッチしなかった場合 null を返します。 そのまま const [, p] = s.match(/(foo)/) と書くと、マッチしなかったときに null から分割代入しようとしてエラーになります。

安全に書くなら、いったん結果を変数に受けてからチェックします。

const s = "bar baz"; // "foo" がない
const m = s.match(/(foo)/);

if (m) {
  const [, p] = m;
  console.log("見つかった:", p);
} else {
  console.log("foo は見つからなかった");
}
JavaScript

「match の結果は null かもしれない」という前提を持つことが、正規表現+キャプチャを扱ううえでとても重要です。

まとめ:キャプチャ+分割代入は「欲しい部分だけを一発で抜き出す技」

const [, p] = s.match(/(foo)/) という書き方は、

キャプチャグループで「ここを抜き出したい」と印を付ける。 match の戻り値配列から、分割代入でその部分だけを変数に受け取る。

という 2 ステップを、コンパクトにまとめたものです。

「この文字列の中から、パターンに合う部分だけを変数として取り出したい」と感じたときに、 キャプチャグループ+分割代入を思い出せるようになること。

それが、正規表現を「ただマッチさせるだけでなく、情報を抽出するための道具」として使いこなすための、大きな一歩になります。

タイトルとURLをコピーしました