JavaScript正規表現で置換（replace）の基本と実践
文字列の中の「一致した部分」を別の文字列に置き換えるのが replace。正規表現を使えば「全件置換」や「一部だけ抜き出して再配置」も柔軟にできます。
構文とポイント
// 基本
const out = s.replace(pattern, replacement);
// 例：全件置換（gフラグ）
const out = s.replace(/a/g, 'b');
- 返り値: 新しい文字列（元の文字列は変わらない）
- 正規表現フラグ: gで「全件」、iで「大文字小文字無視」、mで「複数行の行頭/行末」、sで「改行もドットで一致」
- 置換テキスト: 文字列のほか、関数を渡して「見つかった内容に応じた動的置換」も可能
すぐ使えるテンプレート集
全件置換（最も基本）
const s = "a cat and a car";
console.log(s.replace(/a/g, "A")); // "A cAt And A cAr"
- ポイント: gフラグで「すべてのa」を置換。gがないと最初の1件だけ。
大文字小文字を無視して全件置換
const s = "Apple and apple";
console.log(s.replace(/apple/gi, "fruit")); // "fruit and fruit"
- ポイント: iでケース無視、gで全件。
改行を含むテキストの置換（ドットが改行にも一致）
const s = "BEGIN\nline1\nline2\nEND";
console.log(s.replace(/BEGIN[\s\S]*?END/, "[BLOCK]")); // "[BLOCK]"
- ポイント: ドットは改行に一致しないので「[\s\S]」＋「最短一致 *?」。sフラグ対応環境なら
/BEGIN.*?END/sでもOK。
キャプチャグループで一部を再配置（など）
const s = "2025-12-04";
console.log(s.replace(/(\d{4})-(\d{2})-(\d{2})/, "$2/$3/$1")); // "12/04/2025"
- ポイント: () で囲った部分は $1, $2… で置換文字列に再利用できる。
関数で動的置換（見つかった値に応じて）
const s = "Price: 120, Tax: 24";
const out = s.replace(/\d+/g, (m) => String(Number(m) * 2));
console.log(out); // "Price: 240, Tax: 48"
- ポイント: 置換関数は「一致文字列・位置・全体文字列・グループ」などを引数でもらえる。
CSVの余分な空白を削除（簡易）
const row = " Aki , 22 , Tokyo ";
console.log(row.replace(/\s*,\s*/g, ",")); // "Aki,22,Tokyo"
- ポイント: 区切りの前後空白をまとめて除去。
HTMLに改行を反映（簡易）
const text = "Line1\nLine2\nLine3";
console.log(text.replace(/\n/g, "<br>")); // "Line1<br>Line2<br>Line3"
- ポイント: 改行をタグへ。プレーンテキスト→HTML表示の定番。
正規表現の小技
- 複数候補をまとめて置換:
- ポイント: 文字クラスで「いずれかの区切り」をまとめて処理。
const s = "red;green,blue";
console.log(s.replace(/[;,]/g, "|")); // "red|green|blue"
- 単語の境界だけを対象に:
- ポイント: \b で「完全一致の単語」を狙う。
const s = "cat catalog scatter";
console.log(s.replace(/\bcat\b/g, "dog")); // "dog catalog scatter"
- 前後の空白除去（トリム相当・正規表現版）:
- ポイント: 先頭/末尾の空白を一括削除。
const s = " hello ";
console.log(s.replace(/^\s+|\s+$/g, "")); // "hello"
よくある落とし穴と対策
- 「全部置換されない」問題: gフラグがないと最初の1件だけ。必ず
/.../gを付ける。 - ドットが改行に一致しない: 改行を含む範囲置換は
[\s\S]か sフラグ/.../sを使う。 - メタ文字のエスケープ忘れ:
.*+?()[]{}|^$\はリテラルにしたい場合\が必要。 - キャプチャの番号ずれ: 途中に別の
()を入れると $1 などの番号が変わる。必要なら「名前付きグループ」を使う。
const s = "2025-12-04";
console.log(s.replace(/(?<y>\d{4})-(?<m>\d{2})-(?<d>\d{2})/, "$<m>/$<d>/$<y>"));
- 最短一致を忘れる:
*や+は貪欲。必要に応じて*?+?を使って範囲を狭める。
replaceとその周辺の使い分け
- 全件置換（単純な文字列）: 文字列なら
replaceAll("a","b")、正規表現ならreplace(/a/g,"b")。 - 抽出＋再配置: キャプチャグループ
()と$1を使う。複雑なら置換関数。 - 存在判定だけ: 抽出不要なら
regex.test(s)。 - 分割したい: 置換ではなく
s.split(regex)。
練習問題（手を動かして覚える）
- 1. 全件置換（記号を変える）
const s = "A,B;C,D";
console.log(s.replace(/[;,]/g, "/")); // "A/B/C/D"
- 2. 日付の並び替え（グループ再配置）
const s = "2025-12-04";
console.log(s.replace(/(\d{4})-(\d{2})-(\d{2})/, "$2/$3/$1")); // "12/04/2025"
- 3. 改行をHTMLへ
const s = "L1\nL2\nL3";
console.log(s.replace(/\n/g, "<br>")); // "L1<br>L2<br>L3"
- 4. 動的置換（数字にカンマ付与・簡易版）
const s = "Price: 1200, Tax: 80";
const out = s.replace(/\d+/g, n => Number(n).toLocaleString());
console.log(out); // "Price: 1,200, Tax: 80"
直感的な指針
- 「全部置換？」→ gフラグ。
- 「一部を抜き出して並べ替えたい？」→ キャプチャ＋$1。
- 「一致内容で置換内容を変えたい？」→ 置換関数。
- 「改行を含む塊を置換？」→
[\s\S]*?か sフラグで最短一致。