JavaScript | 文字列を置換（replace メソッド）

では、replace() メソッドの 正規表現版 と $1, $2 などのキャプチャグループ参照 を、初心者向けにわかりやすく解説します。

正規表現を使った置換の基本

通常の replace() では最初に見つかった箇所しか置き換わりませんが、
正規表現 + フラグ（g） を使うと、すべてのマッチ部分を一括で置換できます。

例1：複数箇所を一度に置き換える

let str = 'red apple and red flower';
let newStr = str.replace(/red/g, 'blue');
console.log(newStr);
// → "blue apple and blue flower"

let str = 'red apple and red flower';
let newStr = str.replace(/red/g, 'blue');
console.log(newStr);
// → "blue apple and blue flower"

• /red/ は「red という文字列」を検索する正規表現。
• g フラグをつけると「global（全体）」の意味で、すべての一致箇所を対象に。
• 元の文字列 str は変化せず、新しい文字列が返ります。

キャプチャグループと , の使い方

正規表現では、かっこ () で囲んだ部分を「グループ」として覚えておけます。
置換文字列の中で $1, $2 と書くと、それぞれのグループを再利用できます。

例2：英単語の順序を入れ替える

let str = 'Taro Yamada';
let newStr = str.replace(/(\w+)\s+(\w+)/, '$2 $1');
console.log(newStr);
// → "Yamada Taro"

let str = 'Taro Yamada';
let newStr = str.replace(/(\w+)\s+(\w+)/, '$2 $1');
console.log(newStr);
// → "Yamada Taro"

📘解説：

• (\w+) … 英単語を1つキャプチャ（$1）
• \s+ … 空白1個以上
• (\w+) … もう1つ英単語をキャプチャ（$2）
• '$2 $1' … 2番目と1番目を入れ替えて出力

→ 名前の順序を逆にできる、という便利な使い方。

例3：HTMLタグをマークダウン風に変換

キャプチャを活かして、一部だけを抜き出す応用例です。

let str = '<b>Hello</b> <b>World</b>';
let newStr = str.replace(/<b>(.*?)<\/b>/g, '**$1**');
console.log(newStr);
// → "**Hello** **World**"

let str = '<b>Hello</b> <b>World</b>';
let newStr = str.replace(/<b>(.*?)<\/b>/g, '**$1**');
console.log(newStr);
// → "**Hello** **World**"

📘解説：

• <b>(.*?)<\/b>
  • <b> と </b> の間をキャプチャ（非貪欲マッチ .*?）。
• $1 … タグの中身に対応。
• **$1** に置き換えることで、<b>…</b> → **…**（マークダウン風太字）に。

例4：数字と単位を分けて整形

let str = '100kg 50kg 25kg';
let newStr = str.replace(/(\d+)(kg)/g, '$1 $2');
console.log(newStr);
// → "100 kg 50 kg 25 kg"

let str = '100kg 50kg 25kg';
let newStr = str.replace(/(\d+)(kg)/g, '$1 $2');
console.log(newStr);
// → "100 kg 50 kg 25 kg"

📘解説：

• (\d+) … 数字部分をキャプチャ（$1）
• (kg) … 文字列 "kg" をキャプチャ（$2）
• '$1 $2' … それぞれの間に空白を挿入して整形。

例5：前後を参照する特殊記号との組み合わせ

キャプチャ以外にも $&, $', $` が使えます。

let str = 'Tokyo';
console.log(str.replace(/k/, '[$&]'));  // → "To[k]yo"（マッチ部分）
console.log(str.replace(/k/, '[$`]'));  // → "To[To]kyo"（前の文字列）
console.log(str.replace(/k/, '[$\']')); // → "To[yo]kyo"（後の文字列）

let str = 'Tokyo';
console.log(str.replace(/k/, '[$&]'));  // → "To[k]yo"（マッチ部分）
console.log(str.replace(/k/, '[$`]'));  // → "To[To]kyo"（前の文字列）
console.log(str.replace(/k/, '[$\']')); // → "To[yo]kyo"（後の文字列）

まとめ表

まとめ

• replace() は単純な置換にも正規表現を使った複雑な変換にも対応。
• $1, $2 はグループの内容を再利用するのに非常に便利。
• g フラグで「すべて置換」できる。
• $&、$` 、$' などの特殊置換文字も覚えておくと応用力が広がる。