replace を一言でいうと
replace は、
「文字列の中の一部を、別の文字列に置き換えた“新しい文字列”を返すメソッド」 です。
const text = "I like JavaScript";
const replaced = text.replace("JavaScript", "TypeScript");
console.log(replaced); // "I like TypeScript"
console.log(text); // "I like JavaScript"（元は変わらない） [Mozilla Developer](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace) [Let'sプログラミング](https://www.javadrive.jp/javascript/regexp/index8.html)
ここが重要です。
元の文字列は書き換えず、「置き換え済みの新しい文字列」を返すだけ という点を、必ず押さえてください。
replace の基本構文と「最初の1箇所だけ」ルール
基本構文
replace の基本形は次のとおりです。
置き換え後の文字列 = 元の文字列.replace(探すパターン, 置き換え文字列);
初心者がまず使うのは、「探すパターン」に普通の文字列を渡す形です。
const text = "abcdefgABCDEFG";
const replaced = text.replace("defg", "1234");
console.log(replaced); // "abc1234ABCDEFG" [Motoki's Brain](https://www.motokis-brain.com/article/208)
"defg" という部分が "1234" に置き換えられています。
重要：文字列パターンのときは「最初の 1 箇所だけ」置換
ここが落とし穴です。
const text = "aaaaaaaaaa";
const replaced = text.replace("a", "1");
console.log(replaced); // "1aaaaaaaaa"（最初の a だけ） [Motoki's Brain](https://www.motokis-brain.com/article/208)
文字列を渡した場合、
条件に一致した最初の 1 箇所だけが置き換えられます。
ここが重要です。
「全部の a を 1 に変えてくれ」とはならない。
文字列を第1引数にした replace は“最初の 1 箇所だけ”だと、強く覚えておいてください。
全部置き換えたいとき：replaceAll と 正規表現 /g
いちばん簡単：replaceAll（対応環境なら）
最近の JavaScript には replaceAll があります。
const text = "aaaaaa";
const replaced = text.replaceAll("a", "1");
console.log(replaced); // "111111"
第1引数が文字列でも、
一致するところ全部 を置き換えてくれます。
ただし、かなり古いブラウザだと replaceAll が使えないことがあります。
正規表現 + g フラグで「全部置換」
replace でも、第1引数に「正規表現」を渡せば、
全部置き換えができます。
const text = "aaaaaa";
const replaced = text.replace(/a/g, "1");
console.log(replaced); // "111111"
/a/g の g は「global（全体）」の意味で、
マッチしたすべての箇所を対象にする フラグです。
別の例：
const text = "a1b2c3";
const replaced = text.replace(/\d+/g, "X");
console.log(replaced); // "aXbXcX" [Qiita](https://qiita.com/axoloto210/items/1c473298d3e4d5b155c7)
\d+ は「1文字以上の数字」の意味で、g フラグ付きなので、すべての数字の塊が "X" に置き換えられます。
replace vs replaceAll の整理
replace("a", "1")
→ 最初の 1 件だけ置換replace(/a/g, "1")
→ 正規表現 + g フラグで全部置換replaceAll("a", "1")
→ 文字列パターンでも全部置換
ここが重要です。
「全部置き換えたい」と思ったら、replace に文字列を渡すだけではダメ。replaceAll を使うか、replace(/.../g, ...) の形にする必要があります。
置換は「元の文字列を変えない」＝イミュータブル
元の文字列はそのまま
もう一度強調しますが、replace は元の文字列を変更しません。
const text = "I think Ruth's dog is cuter than your dog!";
const replaced = text.replace("Ruth's", "my");
console.log(replaced); // "I think my dog is cuter than your dog!"
console.log(text); // "I think Ruth's dog is cuter than your dog!" [Mozilla Developer](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace)
文字列はイミュータブル（変更不可）なので、
「変えたように見える」のは、新しい文字列を受け取っているから です。
ここが重要です。replace を呼んだだけでは意味がない。
戻り値を変数に入れるか、その場で使う（console.log(text.replace(...)) など）必要があります。
元の変数を“上書きしたい”なら、自分で代入し直す必要がある。
let text = "foo bar foo";
text = text.replace("foo", "baz"); // 上書きしたいならこう書く
console.log(text); // "baz bar foo"
もう少しだけ踏み込む：第1引数に正規表現を渡すメリット
大文字小文字を区別しない置換（i フラグ）
replace の第1引数を「正規表現」にすると、i フラグで大文字小文字を無視できるようになります。
const paragraph = "I think Ruth's dog is cuter than your dog!";
const regex = /Dog/i;
const replaced = paragraph.replace(regex, "ferret");
console.log(replaced);
// "I think Ruth's ferret is cuter than your dog!" [Mozilla Developer](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace)
/Dog/i は、"Dog" でも "dog" でもマッチします。
すべて置換したいときは g フラグを追加
i だけだと「最初の 1 箇所」だけですが、gi とすると「大文字小文字を無視して全部」置換できます。
const text = "Dog dog DOG";
const regex = /dog/gi;
const replaced = text.replace(regex, "cat");
console.log(replaced); // "cat cat cat"
ここが重要です。
「正規表現 + フラグ」は最初は難しく見えますが、/パターン/g → 全部/パターン/i → 大文字小文字無視/パターン/gi → 両方
この 3 つだけでも覚えておくと、replace の表現力が一気に広がります。
初心者向け：replace を使うときの定番パターン
よくある用途のイメージ
- 禁止ワードを別の文字に置き換える
- 文字種を変える（
-を_に、スペースを-に など） - テンプレート文字列の中の「置換用タグ」を埋める
簡単な例：
const text = "今日の天気は晴れです。";
const replaced = text.replace("晴れ", "雨");
console.log(replaced); // "今日の天気は雨です。"
スペースを - にする（全部）：
const text = "this is a test";
const replaced = text.replace(/ /g, "-");
console.log(replaced); // "this-is-a-test" [Stack Overflow](https://stackoverflow.com/questions/3214886/javascript-replace-only-replaces-first-match)
初心者として本当に押さえてほしいポイント
最後に、replace で大事なところだけを整理します。
replace(pattern, replacement)は「一致した部分を別の文字列に置き換えた“新しい文字列”を返す」。元の文字列は変わらない- 第1引数が「普通の文字列」のときは、最初に一致した 1 箇所だけ 置換される
- 「全部置き換えたい」ときは
replaceAll("a", "b")（新しめの環境）replace(/a/g, "b")（正規表現 + g フラグ）
- 正規表現を使うと、
iフラグで大文字小文字を無視したり、gフラグで全箇所を対象にしたりできる - 置換した結果を使いたいなら、必ず戻り値を変数に入れるか、元の変数に代入し直す
ここが重要です。replace は「文字列をその場で書き換える魔法」ではありません。
毎回“新しい文字列”をくれる関数に近い、と捉えると、バグを減らせます。
そして「最初の 1 件だけ」という仕様を理解しておくと、「あれ、全部変わらない…？」という戸惑いを避けられます。
もし試してみたくなったら、次の 3 パターンを自分で書いて実行してみてください。
const text = "foo foo foo";
// 1: replace (最初の1つだけ)
console.log(text.replace("foo", "bar"));
// 2: replace + 正規表現 /g
console.log(text.replace(/foo/g, "bar"));
// 3: replaceAll
console.log(text.replaceAll("foo", "bar"));
実際の出力を見比べることで、
「replace の“1回だけ”と、“全部置換”の違い」がかなりはっきりと体感できるはずです。