JavaScript正規表現で部分抽出(キャプチャ)の基本と実践
正規表現の キャプチャグループ (...) を使うと、文字列の一部を抜き出せます。match の返り値は配列で、[0] に「全体一致」、[1] 以降に「キャプチャ部分」が入ります。ES6以降は 分割代入 を使うとスマートに取り出せます。
基本の構文
const m = s.match(/(pattern)/);
if (m) {
console.log(m[0]); // 全体一致
console.log(m[1]); // キャプチャ部分
}
// 分割代入で直接取り出す
const [, captured] = s.match(/(pattern)/) || [];
JavaScriptm[0]: 正規表現全体に一致した文字列m[1]: 最初のキャプチャグループ- 複数グループ:
m[2],m[3]…と続く - 分割代入:
const [,p] = ...で[1]を直接変数に入れられる
すぐ使えるテンプレート集
単純な部分抽出
const s = "foo bar";
const [, p] = s.match(/(foo)/) || [];
console.log(p); // "foo"
JavaScript- ポイント:
|| []を付けると一致しなかった場合でもエラーにならない。
数字だけを抜き出す
const s = "Price: 1200 yen";
const [, price] = s.match(/(\d+)/) || [];
console.log(price); // "1200"
JavaScript- ポイント:
\d+で連続数字をキャプチャ。数値化したいならNumber(price)。
日付を分解して抽出
const s = "2025-12-04";
const m = s.match(/(\d{4})-(\d{2})-(\d{2})/);
if (m) {
const [, year, month, day] = m;
console.log(year, month, day); // "2025" "12" "04"
}
JavaScript- ポイント: 複数キャプチャを分割代入で一気に取り出せる。
名前付きキャプチャ(ES2018+)
const s = "User: Aki, Age: 22";
const m = s.match(/User:\s(?<name>\w+),\sAge:\s(?<age>\d+)/);
console.log(m.groups.name); // "Aki"
console.log(m.groups.age); // "22"
JavaScript- ポイント:
(?<name>...)のように名前を付けるとm.groupsから参照できる。
複数一致を全部取りたいなら matchAll
const s = "ID=12; ID=34;";
const re = /ID=(\d+)/g;
for (const m of s.matchAll(re)) {
console.log(m[1]); // "12" → "34"
}
JavaScript- ポイント: matchは最初の一致だけ。全件+キャプチャなら matchAll。
よくある落とし穴と対策
- 一致しないとnull:
s.match(...)が null のときに分割代入するとエラー。|| []を付けて安全に。 - gフラグとの違い:
/.../gを付けると match は「一致文字列の配列」になり、キャプチャは返されない。キャプチャが欲しいなら gなし、全件+キャプチャなら matchAll。 - キャプチャ番号のずれ: 複数の
()があると番号がずれる。名前付きキャプチャを使うと安心。 - 改行にドットがマッチしない: 改行を含めたいなら
[\s\S]か sフラグを使う。
練習問題(手を動かして覚える)
- 1. 数字を抜き出す
const s = "Order #5678";
const [, id] = s.match(/#(\d+)/) || [];
console.log(id); // "5678"
JavaScript- 2. 日付を分解
const s = "2025-12-04";
const [, y, m, d] = s.match(/(\d{4})-(\d{2})-(\d{2})/) || [];
console.log(`${d}/${m}/${y}`); // "04/12/2025"
JavaScript- 3. 名前付きキャプチャで抽出
const s = "User: Ren, Age: 20";
const m = s.match(/User:\s(?<name>\w+),\sAge:\s(?<age>\d+)/);
console.log(m.groups); // { name: "Ren", age: "20" }
JavaScript直感的な指針
- 1件+部分抽出: match+キャプチャ。
- 複数部分を一気に: 分割代入。
- 全件+部分抽出: matchAll。
- 番号ずれを避けたい: 名前付きキャプチャ。
