初心者向け：置換（replace）の基本
replace は「文字列の一部を別の文字列に置き換える」ためのメソッドです。
基本は「元の文字列.replace(置換したいもの, 置換後の文字)」という形で使います。
まずは基本
const s = "I like cats";
console.log(s.replace("cats", "dogs")); // "I like dogs"
- 置換対象: 文字列または正規表現
- 置換回数: 文字列を渡した場合は「最初に見つかった1か所だけ」置換
すべて置換したいとき（replaceAll）
const s = "a,a,a";
console.log(s.replaceAll("a", "b")); // "b,b,b"
- ポイント: 全部置き換えたいなら
replaceAllが簡単 - 代替: 正規表現の
g（グローバル）フラグでも全置換可能"a,a,a".replace(/a/g, "b"); // "b,b,b"
正規表現を使う（柔軟な検索）
- 大文字小文字を無視（i フラグ）
"Foo foo".replace(/foo/ig, "bar"); // "bar bar"
- 単語だけ置換（境界 \b）
"cat scatter".replace(/\bcat\b/g, "dog"); // "dog scatter"
- 特定のパターン（数字だけ）
"ID: abc123".replace(/\d+/g, "#"); // "ID: abc#"
置換結果を動的に決める（関数置換）
const prices = "100 JPY, 250 JPY";
const taxed = prices.replace(/\d+/g, (m) => String(Number(m) * 1.1));
console.log(taxed); // "110 JPY, 275 JPY"
- コールバックの引数:
- Label: m（マッチ文字列）、…groups（括弧のキャプチャ）、index（位置）、input（元文字列）
- 用途: 大文字化、計算、位置情報に基づく処理
"hello world".replace(/\b\w+/g, (word) => word.toUpperCase());
// "HELLO WORLD"
キャプチャを使った再配置（, …）
const d = "2025-12-10";
console.log(d.replace(/(\d{4})-(\d{2})-(\d{2})/, "$1/$2/$3")); // "2025/12/10"
- Label: 丸括弧で囲んだ部分は「キャプチャ」として番号付きで再利用できる
- 応用: 姓名の入れ替えなど
"Yamada Taro".replace(/(\w+)\s+(\w+)/, "$2 $1"); // "Taro Yamada"
よくあるつまずきと注意点
- 最初の1件しか置換されない: 文字列引数の
replaceは1件だけ。全部ならreplaceAllか/.../gを使う。 - 正規表現の特殊文字はエスケープが必要:
. * + ? ^ $ { } ( ) | [ ] \は特別な意味がある
// 文字列のドットを置換したい → 正規表現では \. と書く
"a.b.c".replace(/\./g, "-"); // "a-b-c"
- 部分一致と意図違い:
"cat"を置換すると"scatter"の中の"cat"も変わる。単語だけなら\b境界を使う。 - 置換対象が見つからない: そのままの文字列が返る（例外は出ない）
実用パターン
- 拡張子の置換
"file.min.js".replace(/\.js$/, ".mjs"); // "file.min.mjs"
- 数値の3桁区切り（簡易版）
"1234567".replace(/\B(?=(\d{3})+(?!\d))/g, ","); // "1,234,567"
- 危険文字のエスケープ（正規表現用）
const escapeRegExp = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
// "$&" は「マッチした文字全体」を指す特別な置換記号
ミニ練習
- 問1: “apple, apple, apple” の “apple” をすべて “orange” に置換せよ。
console.log("apple, apple, apple".replaceAll("apple", "orange"));
// または "apple, apple, apple".replace(/apple/g, "orange")
- 問2: “hello_world” のアンダースコアをスペースに置換せよ。
console.log("hello_world".replace("_", " ")); // "hello world"
- 問3: “2025-12-10” を “2025/12/10” に置換せよ（キャプチャを使う）。
console.log("2025-12-10".replace(/(\d{4})-(\d{2})-(\d{2})/, "$1/$2/$3"));
- 問4: 文字列中の数値をすべて2倍にして置換せよ（関数置換）。
const s = "x=3; y=10";
console.log(s.replace(/\d+/g, (m) => String(Number(m) * 2))); // "x=6; y=20"
まとめ
- replace は「最初の1件」を置換、全置換は replaceAll か
/.../g。 - 正規表現を使うと柔軟で強力。大文字小文字無視（i）や全置換（g）が便利。
- 関数置換やキャプチャ（$1 など）で、動的な置換や再構成ができる。
- 特殊文字のエスケープと部分一致の影響に注意。意図に合うパターンを選ぶ。