【JavaScript】replaceで全てを置換する方法を初心者向けに解説

はじめに

皆さんは、JavaScriptで文字列の一部を別の文字に置き換えたいことはありませんか。
たとえば画面に表示される不要な文字や、何かの区切り文字をまとめて変換したいときなどに「全置換できたら便利だな」と感じた経験があるかもしれません。

そのような場面では、replace メソッドを使うことが多いですが、初めて使う方は「このメソッドで本当に全部置き換えられるの？」という疑問を持つことがあるのではないでしょうか。
実は、replaceメソッドだけでは意図した「全ての置換」が行われない場合があります。
一方で、replaceAll メソッドを使う方法や、正規表現 の利用によって全置換を実現する方法など、複数のやり方が存在します。

この記事では、JavaScriptで文字列の全てを置換するために知っておきたいテクニックや、実務での具体的な活用シーンを含めて解説していきます。

この記事を読むとわかること

• replace メソッドの基本的な役割と使い方
• 全ての文字列を置換するために必要な正規表現の使い方
• replaceAll メソッドの特徴と活用シーン
• 実務でどのように文字列の置換処理が使われるか
• よくある間違いと、その対処法

文字列置換の基本とは

文字列置換は、多くのプログラミング言語でサポートされている重要な機能の一つです。
JavaScriptにおいては、主に replace メソッドを利用して、文字列の一部を別の文字列に置換します。
ただし、replaceメソッドをそのまま使うだけだと、置換対象が文字列中に複数あっても、最初の1か所しか置き換わらない場合がある点に注意が必要です。

実務上では、大量のテキストを扱うケースやユーザーの入力データから不要な文字を一括で除去するケースがあり、単純に1か所だけの置換では事足りないことがよくあります。
そのようなときに、正規表現 を使ったり、replaceAll を活用したりすることで、すべての該当箇所を一度に置換できます。

replaceメソッドの基本的な使い方

JavaScriptの文字列は、ドット演算子でreplaceメソッドを呼び出せます。
置換元の文字列が "ABCDE" で、"A" を "Z" に置き換える例を見てみましょう。

コピー
const originalText = "ABCDE";
const newText = originalText.replace("A", "Z");
console.log(newText); // "ZBCDE"

このように書くと、"A" は "Z" に変わります。
しかしもし "A" が文字列中に複数あった場合でも、最初に見つかった "A" だけが置換されます。
つまり replace("A", "Z") の場合、1か所目の "A" だけが "Z" に変わるということです。

replaceAllメソッドができること

JavaScriptの比較的新しい仕様で登場した replaceAll メソッドを使うと、置換対象の文字列が複数あっても、すべてをまとめて置き換えられます。
たとえば以下のようなコードです。

コピー
const originalText = "AAA BBB AAA";
const newText = originalText.replaceAll("AAA", "XYZ");
console.log(newText); // "XYZ BBB XYZ"

このコードの場合は、"AAA" が文中に2か所登場していますが、両方とも "XYZ" に変わって出力されるのがわかります。
正規表現を使わなくても手軽に全置換できるため、シンプルなシナリオでは非常に便利です。

ただし、実務では複雑なパターンマッチングを行いたい場合もあるでしょう。
その際には正規表現の利用が欠かせません。
replaceAllメソッドでも正規表現は使えますが、後述する gフラグ の考え方と合わせて理解すると、より柔軟な実装が可能になります。

全てを置換するための方法

「文字列を全部置き換えたい」という場面では、大きく2つの方法が考えられます。
一つは replaceメソッド と正規表現を組み合わせて gフラグ を使う方法、もう一つは replaceAllメソッド を使う方法です。
どちらも特徴が異なるので、状況に応じて選択する必要があります。

正規表現とgフラグ

replaceメソッドに文字列ではなく正規表現（RegExpオブジェクト）を渡すと、置換対象を柔軟に指定できます。
複数箇所を一度に置換するためには、正規表現の gフラグ (globalフラグ) を指定する必要があります。
たとえば "AAA" をすべて別の文字に置き換える場合のコード例を見てみましょう。

コピー
const originalText = "AAA BBB AAA";
const newText = originalText.replace(/AAA/g, "XYZ");
console.log(newText); // "XYZ BBB XYZ"

ここで replace(/AAA/g, "XYZ") と書いている部分に注目してください。
/AAA/g という正規表現リテラルで gフラグを指定することで、文字列中にあるすべての "AAA" を置き換えます。
もし gフラグをつけなかった場合は、最初に見つかった "AAA" だけが変わってしまいます。

実務での正規表現の例

正規表現を使うと、特定のパターンにマッチする文字列だけを複数個まとめて置換できます。
たとえば、アプリケーション開発ではユーザーが入力したデータから 不要な半角スペースを取り除く シーンなどが代表的です。

コピー
// 文章中の余分な半角スペースをまとめて一つにする例
const userInput = "Hello    World   This   is   JavaScript";
const cleanedInput = userInput.replace(/\s+/g, " ");
console.log(cleanedInput); // "Hello World This is JavaScript"

\s は空白文字を意味し、+ は「一つ以上の連続」を意味します。
gフラグを付けることで、文字列内の空白が連続した箇所をすべて一つのスペースにまとめることができます。
このように正規表現を使うと、単なる文字の置換だけでなくパターンマッチングを含めた多彩な処理が可能になります。

replaceAllを使う場合

先ほど紹介した replaceAll メソッドでは、文字列を第二引数で指定した文字列に一括で置き換えられます。
シンプルに特定の文字列をすべて置換したい場合は、置換対象を文字列として渡すだけで対応可能です。

コピー
const originalText = "cat dog cat dog";
const newText = originalText.replaceAll("cat", "fox");
console.log(newText); // "fox dog fox dog"

これは gフラグのような指定は不要で、指定された文字列に該当する場所をすべて置き換えてくれます。
正規表現も使えますが、replaceメソッドと同様に正規表現を渡す際は、gフラグを付与しておく必要があります。

コピー
const originalText = "123abc456abc";
const newText = originalText.replaceAll(/abc/g, "XYZ");
console.log(newText); // "123XYZ456XYZ"

replaceAllは比較的新しいメソッドなので、古いJavaScript環境 では使えない場合があります。
とはいえ、最近の環境では広くサポートされているため、ブラウザでの開発やサーバーサイドJavaScript（Node.jsなど）でも問題なく使えるケースが増えています。

実務での活用シーン

実務では文字列の置換はさまざまな場面で利用されます。
単なるテキスト変換だけでなく、データを整形したりUI表示をカスタマイズしたりする際にも役立ちます。

文字列のクレンジング処理

ユーザーから入力されたテキストや外部APIから取得したデータには、意図しない空白や記号が含まれていることがあります。
こうしたデータを加工するときに、replaceメソッドやreplaceAllメソッドが便利です。
たとえば、改行コードやタブを一括で削除して取り扱いやすい形式に整形するといったシーンが挙げられます。

「すべてのタブ文字を半角スペースに置き換える」「余分な改行をまとめて削除する」など、細かな文字列処理を自動化するのに適しています。
実際のプロジェクトでは、フォーム入力の前後にスペースがついていたり、予期せぬ位置に制御文字が入ってしまったりすることがあるため、こうした置換処理をバリデーションの前段階で行うのはよくあるパターンといえるでしょう。

UIメッセージの一括置換

動的なUIを作成する際に、テンプレート文字列を使ってユーザー名や日付を埋め込むことがあります。
場合によっては、テスト環境から本番環境に移行するときに、文字列中の特定のキーワードをまとめて切り替えたいケースもあるかもしれません。

たとえば、画面に表示するエラーメッセージに含まれている一部のフレーズを変更したい場合、ソースコード中の数か所を手動で直すよりも、一気に replaceAll で置換できると効率的です。
こうしたUI関連の文字列整備にも、全置換の手法は有効に働きます。

よくある間違いと対処法

文字列全てを置換するときは、思わぬ落とし穴に注意しなければいけません。
ここでは、よくある間違いをいくつか挙げ、その対処法を解説します。

gフラグをつけ忘れる

replaceメソッドに正規表現を渡す際、gフラグをつけずに書いてしまい、意図した置換が一度しか行われないケースは初心者によくあります。
たとえば replace(/abc/, "XYZ") としてしまうと、最初の abc しか置換されません。
明示的に replace(/abc/g, "XYZ") のように書くことで、すべての abc を置換できます。

大文字小文字の扱い

英単語を一括置換するときに、大文字と小文字を区別するかどうかで混乱することがあります。
デフォルトでは replace() も replaceAll() も、大文字小文字を区別して照合します。
たとえば replace(/abc/g, "XYZ") は "ABC" をマッチ対象にしません。

大文字小文字を区別せずに全てのパターンを置き換えたい場合は、 iフラグ (ignore case) を追加します。
replace(/abc/gi, "XYZ") のように書けば、"abc" も "ABC" も "Abc" なども全て置換できます。

パフォーマンスを意識するコツ

大量のデータに対して繰り返し置換処理を行うときは、パフォーマンス を意識すると良いでしょう。
以下にいくつかのポイントを挙げます。

不要な置換呼び出しを減らす

何度も同じ文字列に対して replace を繰り返さないように気をつけましょう。
まとめて正規表現で処理できるなら、1回で済ませるほうが効率的です。

書き換えた文字列を再度置換しない

置換後のテキストにも同じ置換パターンが含まれている場合、無限ループのようになってしまうことがあります。
処理対象が何度も変化しないようにルールを明確にしておきましょう。

replaceAllと正規表現

単純な置換は replaceAll のほうが意図を伝えやすい場合があります。
一方、複雑なパターンマッチングが必要な場合は正規表現を使うほうが効率的です。
用途に合わせて使い分けましょう。

このように、目的に応じた手法を選ぶことで、不要なリソース消費やコードの複雑化を回避できます。

まとめ

JavaScriptで文字列を全部置き換えたいとき、 replaceメソッドに正規表現 (gフラグ) を組み合わせる 方法と、replaceAllメソッドを活用 する方法があります。 正規表現を使うとより柔軟なパターンマッチングが可能になりますし、単純な置換であればreplaceAllが書きやすい場合もあるでしょう。

実務においては、大量のテキストを扱う際の前処理や、UIメッセージの一括変換、不要文字の削除など、文字列置換が欠かせない場面が多々あります。
大文字小文字の区別やgフラグの付け忘れなど、よくある落とし穴に注意しつつ、目的に合った方法を選択すると良いでしょう。

皆さんがJavaScriptの文字列処理を組み込む際に、この記事が役に立てばうれしく思います。
今回ご紹介したreplaceやreplaceAllの仕組みを把握し、初心者の方でも安心して「全ての文字列を置換」する処理を実装してみてください。