【JavaScript入門】キャプチャ

　正規表現の キャプチャ (capture group) とは、丸括弧 () で囲んだ部分文字列を一時的に保存し、後から再利用できる仕組みです。保存した内容は

パターン内 … \1, \2 のように参照
置換文字列内 … $1, $2 のように参照

　できるため、「同じ語の繰り返し」や「順序の入れ替え」などをシンプルに記述できます。本章ではキャプチャの基本から応用までを体系的に整理し、実践的な HTML + JavaScript サンプルで動きを確認します。

１．キャプチャの基礎

記号	説明	主な用途
()	キャプチャ対象をグループ化	後方参照・置換で再利用
\n	パターン内で n 番目のキャプチャを参照	「繰り返し語」検出など
$n	置換文字列内で n 番目のキャプチャを参照	並び替え・タグ付け

1.1. パターン内での再利用

const re = /(ピカ|キラ|ドキ)\1/g;
console.log('ピカピカキラキラドキドキ'.match(re)); // ["ピカピカ","キラキラ","ドキドキ"]

(ピカ|キラ|ドキ) が 1 番目のキャプチャ、直後の \1 が同じ語を要求するため、重複語だけが抽出されます。

1.2. 置換文字列での再利用

const expr = 'x + y = y + x';
const swapped = expr.replace(/^(.+?) = (.+?)$/, '$2 = $1');
console.log(swapped); // y + x = x + y

$1, $2 で左右を簡単に入れ替えられます。

２．関数を使った高度な置換

2.1. コールバックの引数

String.prototype.replace() の第 2 引数を関数にすると、

(一致全体, キャプチャ1, キャプチャ2, …, 一致位置, 元文字列)

が順に渡され、動的な加工が可能です。

2.2. 実例： Markdown 風強調を HTML に変換

ファイル名： markdown_emphasis.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Markdown 強調デモ</title>
<style>
  strong { color: crimson; }
  em    { font-style: italic; }
</style>
</head>
<body>
<p id="text">
  **重要** な情報と __注意__ を *軽く* まとめました。  
  さらに ___強い注意___ もあります。
</p>

<script>
(() => {
  // 連続する * または _ をキャプチャ (2～3 個)
  const mdRe = /([*_]{2,3})(.+?)\1/g;

  const p   = document.getElementById('text');
  const src = p.innerHTML;

  const html = src.replace(mdRe, (all, mark, content) => {
    const len = mark.length;
    // 2 個なら <strong>、3 個なら <em><strong>
    return len === 2
      ? `<strong>${content}</strong>`
      : `<em><strong>${content}</strong></em>`;
  });

  p.innerHTML = html;
  console.log('変換後:', html);
})();
</script>
</body>
</html>

デバックコンソールの出力

変換後: 
  <strong>重要</strong> な情報と <strong>注意</strong> を *軽く* まとめました。  
  さらに <em><strong>強い注意</strong></em> もあります。

ブラウザ表示

重要と注意は太字 (strong)
軽くはそのまま (1 個は対象外)
強い注意 は斜体 + 太字 (em strong)

プログラム解説

行	処理内容
([*_]{2,3})	2～3 個連続する `` または `_` をキャプチャ1*
(.+?)	強調したい本文をキャプチャ2
\1	開始と同じマークで閉じることを要求
コールバック	`mark.length` で 2 か 3 か判定し、適切な HTML タグで挟む

３． 非キャプチャグループと名前付きキャプチャ

3.1. 非キャプチャ `(?: )`

キャプチャ不要だがグループ化だけしたい場合に使用。

const re = /(?:https?|ftp):\/\/\S+/;

3.2. 名前付きキャプチャ `(?<name> )` (ES2018+)

const re = /(?<year>\d{4})-(?<mon>\d{2})-(?<day>\d{2})/;
const { groups } = re.exec('2025-04-05');
console.log(groups.year, groups.mon, groups.day); // 2025 04 05

４．パフォーマンスと注意点

深いネスト は可読性低下。名前付きキャプチャで自己文書化を。
後方参照 はエンジン実装によっては遅くなる場合あり。必要最小限に。
置換関数は大量テキストに対してはコストが高いのでキャッシュ戦略を検討。

まとめ

キャプチャは

同一パターンの再利用
置換での並び替え
関数置換による柔軟な HTML 生成

　など多彩な応用を実現します。まずは () + \1 / $1 の基本形をマスターし、必要に応じて非キャプチャや名前付きキャプチャを組み合わせれば、複雑な文字列操作も短く・読みやすく表現できます。

【JavaScript入門】キャプチャ