【初心者向け】JavaScript replace｜文字列置換の基本と使い方

はじめに

JavaScriptで文字列の一部を置換したい場合、replace関数や正規表現を活用する と効率的に操作できます。

特に大量の文字列や複雑なパターンを扱う際は、正しい書き方を理解しておくことが重要です。

本記事では、replace関数の基本的な使い方から正規表現を使った高度な置換方法 まで、具体的なコード例を交えながら解説します。
これにより、文字列操作の精度と効率が向上し、開発中のエラーや混乱を防ぐことができます。

replace関数の基本

replace関数の書き方

replace関数は、文字列の中で指定した文字やパターンを置換するために使用されます。
基本的な書式は次の通りです。

const str = "Hello World";
const result = str.replace("World", "JavaScript");
console.log(result); // "Hello JavaScript"

この例では、“World” を “JavaScript” に置き換えています。replace関数は最初にマッチした部分のみ置換する 点に注意が必要です。

const str = "Hello World World";
const result = str.replace("World", "JavaScript");
console.log(result); // "Hello JavaScript World"

このように、置換する対象が複数ある場合も最初の1つのみが置換されます。

文字列置換の基本

文字列置換を行う際は、次のポイントを押さえておくとミスを防げます。

これらを意識することで、意図した通りに文字列を置換できます。

正規表現を使った置換

基本的な正規表現の書き方

正規表現を使うと、より柔軟に文字列を置換できます。

正規表現とは、文字列の中から「特定のパターンに一致する部分」をまとめて指定するための書き方です。
単なる文字列指定とは違い、繰り返しや条件付きの検索・置換を簡潔に表現できます。

例えば、複数箇所の置換やパターンに一致する文字列の置換が可能です。

const text = "cat bat mat";
const result = text.replace(/at/g, "og");
console.log(result); // "cog bog mog"

このコードでは、/at/g という正規表現を使っています。
/at/ は「at という文字の並びに一致するパターン」を表し、g というフラグは「文字列内のすべての一致箇所を対象にする」という意味です。

つまり上記コードでは、文字列内の すべての「at」 を「og」に置換しています。

このように、正規表現を使うことで、特定のパターンをまとめて置換し、文字列操作を効率よく行うことができます。

複数置換の実践例

複数の文字列を一度に置換したい場合、正規表現と置換関数を組み合わせると便利です。

const sentence = "apple banana cherry";
const result = sentence.replace(/apple|banana/g, (match) => {
  if(match === "apple") return "orange";
  if(match === "banana") return "grape";
});
console.log(result); // "orange grape cherry"

このコードでは、/apple|banana/g という正規表現により、“apple” と “banana” のどちらにもマッチするよう設定しています。

さらに、第二引数を関数にすることで、マッチした文字列ごとに置換内容を変えることができます。

具体的には、“apple” が “orange” に、“banana” が “grape” に置換され、“cherry” は対象外のためそのまま残ります。

このように、条件分岐を活かした置換が可能になるため使われることがあります。

replaceの第二引数に関数を使う場合について

replace関数では、第二引数に文字列ではなく関数を指定することができます。

この場合、文字列内で正規表現や文字列に一致した部分が自動的に関数の引数として渡され、関数の返り値が置換後の文字列として適用されます。

例えば、

const sentence = "apple banana cherry";
sentence.replace(/apple|banana/g, (match) => {
  console.log(match);
});

上記のコードを実行すると、コンソールには下記のように出力されます。

apple
banana

ここで (match) => { … } の match には、正規表現 /apple|banana/g に一致した文字列が順番に渡されます。

この挙動は replace関数固有の仕様 であり、他の関数で同じように自動で文字列が引数として渡されるわけではありません。

よくあるミス

置換対象の指定ミス

文字列置換で特に多いミスは、置換対象の文字列の間違いです。

例えばスペースや大文字・小文字の違いで意図通りに置換されないことがあります。

ブラウザのコンソールや開発者ツールで出力を確認し、意図通りに置換されているかチェックする習慣を身につけましょう。

正規表現のパターン間違い

正規表現では、特殊文字のエスケープ漏れやフラグ指定の誤りで、置換が正しく行われないことがあります。

必ずテストデータで動作を確認し、意図した文字列が置換されるか確認してください。

※エスケープ：正規表現で特別な意味を持つ文字を、普通の文字として扱うためにつける「\」

※フラグ指定：正規表現の動きを変えるために正規表現の末尾につける「g」や「i」などの文字

実務でのreplace活用例

フォーム入力やデータ整形

ユーザー入力のフォーマット修正や不要文字の削除にはreplaceが便利です。

const phone = "080-1234-5678";
const cleanPhone = phone.replace(/-/g, "");
console.log(cleanPhone); // "08012345678"

このようにreplaceを使うことで、ハイフンなどの不要文字を簡単に取り除き、データベースや処理に適した形に整形できます。

特にフォーム入力やユーザーからの文字列データを扱う場面では、安全な文字列操作が可能です。

複雑な文字列の置換

文章内の複数パターンを同時に置換したい場合、正規表現と関数を組み合わせて処理できます。

const text = "red, blue, green";
const result = text.replace(/red|green/g, (color) => color.toUpperCase());
console.log(result); // "RED, blue, GREEN"

この方法を使えば、条件に応じた複数の置換を一度に行うことができ、文章やデータの整形作業を大幅に簡略化できます。
色やカテゴリ、特定のキーワードをまとめて加工する際に非常に役立ちます。

※toUpperCase()：文字列をすべて大文字に変換するメソッド

replace関数を使う上での注意点

文字列の型を確認

replace関数は文字列型に対して使用します。
数値やオブジェクトにはそのまま使えないため、必要に応じて文字列に変換してから置換してください。

正規表現の使い方を理解

正規表現を使うと複雑な文字列の置換も可能ですが、特殊文字の扱いやフラグ指定など、基本的なルールを押さえておかないと意図した結果にならないことがあります。

必ず正規表現の使い方を理解してから置換を行いましょう。

まとめ

本記事では、JavaScriptにおけるreplace関数と正規表現を使った文字列置換の基本から実践例までを解説しました。

基本と実務例を押さえておくことで、文字列操作の精度を高め、効率よく開発作業を進められます。さらに、データ整形やフォーム入力の正規化など、多くの場面で応用可能です。

こうしたJavaScriptの基礎からWeb制作を学びたい方には、WEBMASTERS がおすすめです。
現役エンジニアのマンツーマン指導により、独学だけでは気づきにくいポイントも効率よく習得できます。

文字列置換の理解を深めるためには、実際に手を動かしてコードを書き、ブラウザや開発環境で動作確認をしながら学習していきましょう。