JavaScriptで開発を進める中で、文字列の特定の部分を別の文字に置き換えたい場面は非常に多くあります。
例えば、ユーザーが入力したデータのフォーマットを整えたり、特定の記号を削除したりといった処理が挙げられます。
以前のJavaScriptでは、すべての文字列を置換するために正規表現を駆使する必要がありました。
しかし、現在のJavaScriptではreplaceAllメソッドの登場により、より直感的に記述できるようになっています。
この記事では、replaceとreplaceAllの基本的な使い方から、実務で役立つ応用パターンまでを詳しく解説します。
JavaScriptにおける文字列置換の基本
JavaScriptで文字列を置換するには、主にreplaceメソッドとreplaceAllメソッドの2種類を使用します。
これらのメソッドは、元の文字列を変更せずに、置換後の新しい文字列を返すという性質を持っています。
JavaScriptの文字列はイミュータブル（不変）であるため、元の変数の値を直接書き換えることはできません。
そのため、置換結果を利用したい場合は、新しい変数に代入するか、元の変数に再代入する必要があります。
まずは、最もシンプルなreplaceメソッドの挙動を見ていきましょう。
replaceメソッドの特徴
replaceメソッドは、指定したパターンに一致した箇所の「最初の一つだけ」を置換するメソッドです。
第1引数に検索したい文字列や正規表現を指定し、第2引数に置換後の文字列を指定します。
// replaceメソッドの基本例
const text = "リンゴ、バナナ、リンゴ";
const result = text.replace("リンゴ", "オレンジ");
console.log(result);オレンジ、バナナ、リンゴ上記の例では、最初の「リンゴ」だけが「オレンジ」に置換され、2つ目の「リンゴ」はそのまま残っていることがわかります。
このように、「最初に見つかったものだけを変えたい」という場合にはreplaceが最適です。
replaceAllメソッドの特徴
一方で、replaceAllメソッドは、一致するすべての箇所を一度に置換するために使用されます。
これはES2021で導入された比較的新しい機能ですが、現在のモダンブラウザやNode.js環境では標準的に利用可能です。
// replaceAllメソッドの基本例
const text = "リンゴ、バナナ、リンゴ";
const result = text.replaceAll("リンゴ", "オレンジ");
console.log(result);オレンジ、バナナ、オレンジreplaceAllを使うことで、ループ処理や複雑な正規表現を書かなくても、すべての対象を書き換えることが可能になりました。
一括置換を行いたい場合は、replaceAllを選択するのが現在のベストプラクティスです。
正規表現を用いた高度な置換
文字列による指定だけでなく、正規表現を用いることでより柔軟な条件指定が可能になります。
例えば、大文字と小文字を区別せずに置換したり、特定のパターンに合致するものを一括で変更したりできます。
replaceと正規表現の組み合わせ
replaceメソッドで正規表現を使用する場合、/gフラグ（グローバル検索）を付けるか付けないかで挙動が変わります。
const text = "Hello JavaScript, hello world";
// 正規表現で「hello」を「Hi」に置換（大文字小文字を区別しない i フラグ）
const result = text.replace(/hello/i, "Hi");
console.log(result);Hi JavaScript, hello world上記のコードでは、/iフラグによって大文字小文字を無視していますが、/gフラグがないため最初の1つしか置換されません。
もしreplaceですべてを置換したい場合は、/hello/giのようにgフラグを指定する必要があります。
replaceAllでの正規表現の注意点
replaceAllメソッドで正規表現を使用する際には、非常に重要な注意点があります。
それは、正規表現を使用する場合、必ず「g」フラグ（グローバルフラグ）を含めなければならないという点です。
もしgフラグを忘れてしまうと、JavaScriptはエラー（TypeError）をスローします。
const text = "apple, orange, apple";
try {
// gフラグがないためエラーが発生する
text.replaceAll(/apple/, "strawberry");
} catch (e) {
console.error("エラーが発生しました: " + e.message);
}エラーが発生しました: String.prototype.replaceAll called with a non-global RegExp argumentこの仕様は、開発者が意図せず一部だけを置換してしまうミスを防ぐための安全装置として機能しています。
replaceとreplaceAllの使い分け表
どちらのメソッドを使うべきか迷った際は、以下の比較表を参考にしてください。
| 機能 | replace | replaceAll |
|---|---|---|
| 文字列による検索 | 最初の1つのみ置換 | すべての該当箇所を置換 |
| 正規表現（gなし） | 最初の1つのみ置換 | 使用不可（エラー） |
| 正規表現（gあり） | すべての該当箇所を置換 | すべての該当箇所を置換 |
| 主な用途 | 特定の1箇所を修正したい時 | 単語の一括変更を行いたい時 |
実践的な活用シーン
ここからは、実際のWeb開発でよく遭遇する具体的なケーススタディを見ていきましょう。
1. 電話番号や日付のフォーマット変換
ハイフン区切りの数字からハイフンを取り除きたい場合、replaceAllが非常に便利です。
const tel = "03-1234-5678";
const cleanTel = tel.replaceAll("-", "");
console.log(cleanTel);0312345678replaceを使用すると「031234-5678」となってしまいますが、replaceAllなら一瞬で全てのハイフンが消えます。
2. HTMLタグのエスケープ処理
ユーザーから入力された文字列に含まれる記号を、安全な形式に置換（サニタイズ）する際にも役立ちます。
ただし、単純な置換では不十分な場合もあるため、複数の記号を連続して変換するテクニックが必要です。
const input = "<script>alert('test')</script>";
const safeText = input.replaceAll("<", "<").replaceAll(">", ">");
console.log(safeText);<script>alert('test')</script>このように、メソッドをドットでつなげて記述する「メソッドチェーン」を利用することで、複雑な置換もスッキリと書けます。
3. 置換にコールバック関数を利用する
replaceやreplaceAllの第2引数には、文字列だけでなく関数を渡すことも可能です。
これにより、一致した文字列の内容に応じて動的に置換後の内容を決定できます。
const prices = "100円、500円、1000円";
// 数字部分を2倍の金額に置換する処理
const salesPrices = prices.replace(/\d+/g, (match) => {
return parseInt(match) * 2;
});
console.log(salesPrices);200円、1000円、2000円この手法は、ログデータの解析やテンプレートエンジンの作成など、高度な文字列処理において強力な武器になります。
パフォーマンスと注意点
大量のテキストデータ（数メガバイト単位）を処理する場合、正規表現と文字列指定のどちらが速いかが気になるかもしれません。
一般的には、固定の文字列を置換する場合は文字列指定の方が高速に動作する傾向があります。
正規表現は解析コストがかかるため、シンプルな置換であればreplaceAll("search", "replace")のように記述するのが理想的です。
また、古いブラウザ（Internet Explorerなど）をサポートする必要があるプロジェクトでは、replaceAllが動作しません。
そのような環境では、引き続きreplace(/pattern/g, "replacement")を使用するか、Polyfillを導入する必要があります。
2026年現在の開発現場では、ほとんどのケースでreplaceAllを標準的に使用しても問題ないでしょう。
まとめ
JavaScriptでの文字列置換は、replaceとreplaceAllを正しく使い分けることで、コードの可読性と保守性が向上します。
単一の置換にはreplace、すべての置換にはreplaceAllという基本をしっかり押さえておきましょう。
また、複雑な条件が必要な場合は正規表現を活用し、動的な置換が必要な場合はコールバック関数を検討してください。
特にreplaceAllで正規表現を使う際の「gフラグ必須」というルールは、バグを防ぐためにも忘れないようにしましょう。
今回紹介した事例を参考に、日々のコーディングで最適な置換処理を選択してみてください。