JavaScript正規表現：キャプチャグループ

概要：このチュートリアルでは、JavaScript正規表現のキャプチャグループについて学び、それを使用して一致に対するサブグループを作成する方法を説明します。

JavaScript正規表現のキャプチャグループ入門

次のパスがあるとします。

resource/idCode language: JavaScript (javascript)

例えば

posts/10

このパスでは、リソースはpostsで、idは10です。パスに一致させるには、次の正規表現を使用します。

/\w+\/\d+/Code language: JavaScript (javascript)

このパターンでは

• \w+は、文字クラスと量子化子(+)の組み合わせで、1文字以上の単語文字に一致します。
• /はスラッシュ(/)に一致します。バックスラッシュ(\)はスラッシュをエスケープします。
• \d+は、数字文字クラスと量子化子(+)の組み合わせで、1桁以上の数字に一致します。

次の例では、正規表現/\w+\/\d+/パターンを使用して文字列 'posts/10'に一致します。

const path = 'posts/10';
const pattern = /\w+\/\d+/;

const match = path.match(pattern);
console.log(match);
Code language: JavaScript (javascript)

出力

[ 'posts/10', index: 0, input: 'posts/10', groups: undefined ]Code language: JavaScript (javascript)

パスposts/10からid 10を取得するには、キャプチャグループを使用します。ルールにキャプチャグループを作成するには、そのルールを括弧で囲みます。

(rule)Code language: JavaScript (javascript)

次の例では、パスposts/10からid値をキャプチャするキャプチャグループを作成します。

'\w+/(\d+)'Code language: JavaScript (javascript)

このパターンでは、ルール\d+を括弧()で囲んでいます。新しいパターンでプログラムを実行すると、1つのマッチが表示されます。

const path = 'posts/10';
const pattern = /\w+\/(\d+)/;

const match = path.match(pattern);
console.log(match);Code language: JavaScript (javascript)

出力

[ 'posts/10', '10', index: 0, input: 'posts/10', groups: undefined ]Code language: JavaScript (javascript)

match()メソッドは、一致の配列を返します。最初の要素は完全一致('posts/10')で、2番目の要素('10')はキャプチャグループの値です。

String.match()メソッドは、gフラグ（例：/\w+\/(\d+)/g）を設定した場合、グループを返しません。gフラグを使用する場合は、グループを取得するためにString.matchAll()メソッドを使用する必要があります。

複数のキャプチャグループ

パス(post/10)のリソース(posts)とid(10)の両方をキャプチャするには、正規表現に複数のキャプチャグループを次のように使用します。

/(\w+)\/(\d+)/Code language: JavaScript (javascript)

この正規表現には、\w+と\d+の2つのキャプチャグループがあります。

次のスクリプトは、完全一致とすべてのサブグループを示しています。

const path = 'posts/10';
const pattern = /(\w+)\/(\d+)/;

const match = path.match(pattern);
console.log(match);
Code language: JavaScript (javascript)

出力

['posts/10', 'posts', '10', index: 0, input: 'posts/10', groups: undefined]Code language: JavaScript (javascript)

最初のサブグループと2番目のサブグループにアクセスするには、match[1]とmatch[2]を使用します。match[0]は完全一致を返します。例：

const path = 'posts/10';
const pattern = /(\w+)\/(\d+)/;

const match = path.match(pattern);
console.log(match[0], match[1], match[2]);Code language: JavaScript (javascript)

出力

posts/10 posts 10Code language: JavaScript (javascript)

名前付きキャプチャグループ

一致内のサブグループにアクセスするには、インデックスを使用します。しかし、より便利にするために、意味のある名前でサブグループにアクセスしたい場合があります。

そのためには、**名前付きキャプチャグループ**を使用して、グループに名前を割り当てます。次の例は、グループに名前を割り当てる構文を示しています。

(?<name>rule)Code language: JavaScript (javascript)

この構文では

• ()はキャプチャグループを示します。
• ?<name>はキャプチャグループの名前を指定します。
• ruleはパターン内のルールです。

例えば、次のように名前を作成します。

/?<resource>\w+)\/(?<id>\d+/Code language: JavaScript (javascript)

この構文では

• resourceは最初のキャプチャグループの名前です。
• idは2番目のキャプチャグループの名前です。

例えば

const path = 'posts/10';
const pattern = /(?<resource>\w+)\/(?<id>\d+)/;

const match = path.match(pattern);
console.log(match);
Code language: JavaScript (javascript)

出力

[
  'posts/10',
  'posts',
  '10',
  index: 0,
  input: 'posts/10',
  groups: [Object: null prototype] { resource: 'posts', id: '10' }
]Code language: JavaScript (javascript)

一致には、オブジェクトであるgroupsプロパティがあります。match.groupsオブジェクトには、名前がキャプチャグループ名で、値がキャプチャ値であるプロパティがあります。例：

const path = 'posts/10';
const pattern = /(?<resource>\w+)\/(?<id>\d+)/;

const match = path.match(pattern);
for (const name in match.groups) {
  console.log(name, match.groups[name]);
}Code language: JavaScript (javascript)

出力

resource posts
id 10Code language: JavaScript (javascript)

名前付きキャプチャグループの追加例

次の正規表現は、パスposts/2022/02/18に一致します。

/\w+\/d{4}\/d{2}\/d{2}/Code language: JavaScript (javascript)

リソース(post)、年(2022)、月(02)、日(18)をキャプチャするには、次のように名前付きキャプチャグループを使用します。

/(?<resource>\w+)\/(?<year>\d{4})\/(?<month>\d{2})\/(?<day>\d{2})/Code language: JavaScript (javascript)

このプログラムは、パターンを使用してパスに一致し、すべてのサブグループを表示します。

const path = 'posts/2022/02/18';
const pattern =
  /(?<resource>\w+)\/(?<year>\d{4})\/(?<month>\d{2})\/(?<day>\d{2})/;

const match = path.match(pattern);
console.log(match.groups);
Code language: JavaScript (javascript)

出力

{resource: 'posts', year: '2022', month: '02', day: '18'}Code language: JavaScript (javascript)

まとめ

• ルールを括弧()で囲んでキャプチャグループを作成します。正規表現には複数のキャプチャグループを含めることができます。
• (?<capturingGroupName>rule)を使用して、パターン内のルールに対して名前付きキャプチャグループを作成します。