JavaScriptのreplaceメソッドで文字列を置換する7種の方法

●JavaScriptのreplaceメソッドとは
- ○replaceメソッドの基本的な使い方
- ○サンプルコード1：単純な文字列の置換
●正規表現を使ったreplaceメソッド
●複数の文字列を置換するreplaceメソッド
●よくあるエラーと対処法
●replaceメソッドの応用例
まとめ

●JavaScriptのreplaceメソッドとは

皆さん、JavaScriptを使って文字列を処理したことはありますか？

文字列操作は、プログラミングの中でも非常に重要なスキルの1つです。

特に、文字列の一部を別の文字列に置き換えたいというニーズは、よくあるのではないでしょうか。

そんな時に活躍するのが、JavaScriptのreplaceメソッドです。

replaceメソッドは、文字列の中の指定した部分を別の文字列に置換することができる強力なメソッドなんです。

でも、replaceメソッドの使い方って、ちょっと複雑に感じませんか？

正規表現を使ったり、複数の文字列を一括で置換したりと、奥が深いんですよね。

そこで今回は、JavaScriptのreplaceメソッドについて、基本的な使い方から応用例まで、実際のコードを交えながらじっくり解説していきたいと思います。

この記事を読み終えた頃には、きっとreplaceメソッドを自在に使いこなせるようになっているはずですよ。

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

まずは、replaceメソッドの基本的な使い方から見ていきましょう。

replaceメソッドは、文字列のメソッドの1つで、このような構文で使用します。

文字列.replace(検索文字列, 置換文字列)

ここで、「検索文字列」には、置換したい部分の文字列を指定します。

「置換文字列」には、置換後の文字列を指定するわけですね。

では、実際にreplaceメソッドを使ってみましょう。

○サンプルコード1：単純な文字列の置換

下記のコードは、文字列の中の「JavaScript」という部分を「JS」に置換する例です。

let str = "I love JavaScript!";
console.log(str.replace("JavaScript", "JS"));

実行結果はこのようになります。

I love JS!

このように、replaceメソッドを使えば、文字列の中の特定の部分を簡単に置換することができます。

ただし、この例では完全一致する文字列しか置換できませんでした。

もし、大文字と小文字を区別せずに置換したい場合や、ある程度の柔軟性を持たせた置換をしたい場合は、正規表現を使う必要があります。

●正規表現を使ったreplaceメソッド

前の章で、replaceメソッドの基本的な使い方を見てきましたが、あれだけではreplaceメソッドの本当の力を発揮できません。

文字列の置換をもっと柔軟に行うには、正規表現を使う必要があるんです。

正規表現って聞くと、ちょっと身構えてしまいますよね。

でも大丈夫、基本的なルールさえ押さえておけば、そんなに難しくありません。

これを機に、正規表現を使ったreplaceメソッドをマスターしてしまいましょう！

○正規表現の基本

正規表現とは、文字列のパターンを表現するための言語です。

正規表現を使うと、特定の文字列だけでなく、文字列のパターンにマッチする部分を検索したり置換したりできるようになります。

正規表現では、メタ文字と呼ばれる特別な意味を持つ文字を使います。

よく使われるメタ文字には、次のようなものがあります。

.(ドット) -> 任意の1文字にマッチ
* -> 直前の文字の0回以上の繰り返しにマッチ
+ -> 直前の文字の1回以上の繰り返しにマッチ
? -> 直前の文字の0回または1回の出現にマッチ
^ -> 文字列の先頭にマッチ
$ -> 文字列の末尾にマッチ

これらのメタ文字を組み合わせることで、柔軟な文字列のパターンを表現できるわけです。

○サンプルコード2：正規表現を使った置換

それでは、正規表現を使ったreplaceメソッドの例を見ていきましょう。

下記のコードは、文字列内の数字を全てアスタリスク(*)に置換する例です。

let str = "私の電話番号は090-1234-5678です。";
console.log(str.replace(/\d/g, "*"));

実行結果は次のようになります。

私の電話番号は***-****-****です。

このコードでは、正規表現 /\d/g を使っています。

\d は数字にマッチするメタ文字で、g はグローバルフラグと呼ばれ、文字列全体を対象に置換を行うためのオプションです。

この例のように、正規表現を使えば数字だけを簡単に置換することができます。

でも、これはほんの一例に過ぎません。正規表現にはもっと多くの機能があるんです。

○サンプルコード3：正規表現のキャプチャグループを使った置換

正規表現のもう1つの強力な機能が、キャプチャグループです。

キャプチャグループを使うと、正規表現にマッチした部分を取り出して、置換後の文字列の中で使うことができます。

下記のコードは、”年月日”の形式の日付を”月/日/年”の形式に変換する例です。

let str = "今日は2023年5月10日です。";
console.log(str.replace(/(\d{4})年(\d{1,2})月(\d{1,2})日/g, "$2/$3/$1"));

実行結果は次のようになります。

今日は5/10/2023です。

この例では、正規表現 /(\d{4})年(\d{1,2})月(\d{1,2})日/g を使っています。

()で囲まれた部分がキャプチャグループで、マッチした部分を順番に$1, $2, $3…という形で参照できます。

置換後の文字列 “$2/$3/$1” は、キャプチャグループを参照しながら月、日、年の順番に並べ替えています。

キャプチャグループを使えば、このように文字列の一部を入れ替えるような複雑な置換も簡単に行えるようになります。

○サンプルコード4：正規表現のグローバルフラグを使った置換

最後に、グローバルフラグについてもう少し詳しく見ておきましょう。

先ほどのコードをグローバルフラグなしで実行するとどうなるでしょうか。

let str = "今日は2023年5月10日です。明日は2023年5月11日です。";
console.log(str.replace(/(\d{4})年(\d{1,2})月(\d{1,2})日/, "$2/$3/$1"));

実行結果は次のようになります。

今日は5/10/2023です。明日は2023年5月11日です。

グローバルフラグを付けていないので、最初にマッチした部分だけが置換されています。

文字列全体を置換するには、正規表現の最後にグローバルフラグ g を付ける必要があるんです。

console.log(str.replace(/(\d{4})年(\d{1,2})月(\d{1,2})日/g, "$2/$3/$1"));

これで、文字列内の全ての日付が置換されるようになりました。

今日は5/10/2023です。明日は5/11/2023です。

正規表現を使いこなすには、メタ文字やフラグなどのルールをしっかり理解することが大切です。

でも、一度理解してしまえば、replaceメソッドの可能性が大きく広がるはずです。

●複数の文字列を置換するreplaceメソッド

これまで、replaceメソッドを使って文字列を置換する方法を見てきました。

でも、実際の開発現場では、もっと複雑な置換のニーズがあるんです。

例えば、複数のパターンを一括で置換したい、あるいは置換する文字列を動的に決めたいなど、様々なケースが考えられます。

そんな時に役立つのが、replaceメソッドの発展的な使い方です。

ここからは、複数の文字列を置換する方法を、いくつかのアプローチに分けて説明していきます。

○replaceAllメソッドについて

まずは、ES2021で導入された replaceAll メソッドから見ていきましょう。

これまで、replaceメソッドにグローバルフラグを付けることで複数の置換を行ってきましたが、replaceAllメソッドを使えば、よりシンプルに記述できます。

replaceAllメソッドの基本的な使い方は、次のような感じです。

文字列.replaceAll(検索文字列, 置換文字列)

先ほどの電話番号の例を、replaceAllメソッドで書き直すとこんな感じになります。

○サンプルコード5：replaceAllを使った複数置換

let str = "私の電話番号は090-1234-5678です。";
console.log(str.replaceAll("0", "*"));

実行結果

私の電話番号は*9*-1234-5678です。

replaceAllメソッドを使えば、グローバルフラグを付けずに簡潔に記述できるのが嬉しいポイントですね。

ただし、replaceAllメソッドは正規表現も受け付けるので、正規表現を使う場合は注意が必要です。

○サンプルコード6：関数を使った複数置換

次に、replaceメソッドに関数を渡して、置換後の文字列を動的に決める方法を見ていきます。

この方法は、単純な文字列の置換だけでなく、条件に応じて置換内容を変えたい場合に役立ちます。

例えば、文字列内の小文字を大文字に、大文字を小文字に変換してみましょう。

let str = "Hello, World!";
console.log(str.replace(/[a-z]/gi, function(match) {
    return match === match.toUpperCase() ? match.toLowerCase() : match.toUpperCase();
}));

実行結果

hELLO, wORLD!

この例では、正規表現 /[a-z]/gi で文字列内の全てのアルファベットを検索し、マッチした部分を関数に渡しています。

関数内では、マッチした文字が大文字か小文字かを判定し、逆の大小文字に変換しています。

このように、関数を使えば、マッチした部分に応じて自由に置換内容を決めることができます。

○サンプルコード7：オブジェクトを使った複数置換

最後に、オブジェクトを使って複数の置換を一括で行う方法を見ていきます。

この方法は、複数の文字列を決まったルールで置換したい場合に便利です。

下記の例では、文字列内の顔文字を絵文字に変換しています。

let str = "今日はいい天気ですね :) 明日も晴れるといいな :)";
let emoticons = {
    ":)": "😊",
    ":(": "😢",
    ";)": "😉"
};

console.log(str.replace(/:\)|:\(|;\)/g, function(match) {
    return emoticons[match];
}));

実行結果

今日はいい天気ですね 😊 明日も晴れるといいな 😊

この例では、置換したい顔文字とそれに対応する絵文字をオブジェクトとして定義しています。

そして、正規表現で顔文字を検索し、マッチした部分をオブジェクトの値に置き換えています。

このアプローチは、HTMLのエスケープ処理など、決まったルールで複数の置換を行う場合に特に有効です。

●よくあるエラーと対処法

ここまで、replaceメソッドの様々な使い方を見てきましたが、実際に使っていると、思わぬエラーに遭遇することがあります。

特に、初心者のうちは、エラーメッセージの意味がよくわからず、途方に暮れてしまうことも多いのではないでしょうか。

エラーの原因を理解し、適切に対処できるようになることが、スキルアップの第一歩です。

そこで、この章では、replaceメソッドを使う際によく遭遇するエラーとその対処法を、具体的なコード例を交えながら解説していきます。

エラーに立ち向かう勇気を持って、一緒に乗り越えていきましょう！

○文字列でないオブジェクトに対してreplaceを使った場合

まず最初によく遭遇するエラーが、文字列でないオブジェクトに対してreplaceメソッドを使った場合のエラーです。

コードを見てみましょう。

let num = 123;
console.log(num.replace("2", "5"));

このコードを実行すると、次のようなエラーが発生します。

Uncaught TypeError: num.replace is not a function

エラーメッセージから、numオブジェクトにはreplaceメソッドが存在しないことがわかります。

replaceメソッドは文字列オブジェクトのメソッドなので、数値や他のオブジェクトでは使えないんです。

このエラーを避けるには、事前にオブジェクトが文字列であることを確認するか、明示的に文字列に変換する必要があります。

次のように修正してみましょう。

let num = 123;
console.log(String(num).replace("2", "5"));

実行結果

String()関数を使って数値を文字列に変換することで、エラーを回避できました。

オブジェクトのタイプに注意を払うことが、エラー対策の第一歩です。

○正規表現のパターンが誤っている場合

次によく遭遇するエラーが、正規表現のパターンが誤っている場合のエラーです。

コードを見てみましょう。

let str = "Hello, World!";
console.log(str.replace(/[A-z]/g, ""));

このコードの意図は、文字列から全てのアルファベットを取り除くことですが、実行してみると期待通りの結果になりません。

Hello, World!

文字列が変化していません。

これは、正規表現のパターンが誤っているためです。

アルファベットの範囲を表す [A-z] は、実は大文字のAから小文字のzまでの範囲を表しているのではありません。

正しくは [A-Za-z] と書く必要があります。

let str = "Hello, World!";
console.log(str.replace(/[A-Za-z]/g, ""));

実行結果

, !

このように、正規表現のパターンを正しく書くことが重要です。

正規表現のルールを理解し、意図したパターンを正確に表現できるようになっておきましょう。

○replaceAllがundefinedになる場合

最後に、比較的新しいメソッドであるreplaceAllを使う際によく遭遇するエラーを見ていきます。

次のコードを実行してみましょう。

let str = "apple, banana, apple";
console.log(str.replaceAll("apple", "orange"));

古いバージョンのNode.jsやブラウザでは、次のようなエラーが発生するかもしれません。

Uncaught TypeError: str.replaceAll is not a function

これは、replaceAllメソッドがまだサポートされていない環境で実行された場合に発生するエラーです。

replaceAllメソッドはES2021で導入された比較的新しいメソッドなので、古い環境では使えない可能性があります。

この場合は、従来のreplaceメソッドにグローバルフラグを付ける方法で代用するのが賢明です。

let str = "apple, banana, apple";
console.log(str.replace(/apple/g, "orange"));

実行結果

orange, banana, orange

新しいメソッドを使う際は、常に環境のサポート状況を確認する習慣を付けましょう。

サポートされていない場合は、代替手段を考える柔軟性も必要です。

●replaceメソッドの応用例

ここまで、replaceメソッドの基本的な使い方から、正規表現や複数置換、エラー対処法まで、幅広く見てきました。

でも、replaceメソッドの真の力は、実践的な場面で発揮されるんです。

プログラミングの世界では、文字列処理のニーズは尽きません。

HTMLの操作、URLの解析、データフォーマットの変換など、あらゆる場面で文字列処理が求められます。

そして、その多くの場面で、replaceメソッドが重要な役割を果たすんです。

そこで、ここでは、実務でよく遭遇する文字列処理の課題を、replaceメソッドを使ってどう解決するかを、具体的なコード例を交えながら解説していきます。

ここで紹介する応用例を通じて、replaceメソッドの真の力を体感してください！

○サンプルコード8：HTMLタグの除去

Webアプリケーション開発では、ユーザー入力のサニタイズ（無害化）が重要なセキュリティ対策の1つです。

特に、ユーザーが入力したHTMLタグをそのまま表示してしまうと、クロスサイトスクリプティング（XSS）攻撃の危険性があります。

そんな時、replaceメソッドを使ってHTMLタグを除去することができます。

コードを見てみましょう。

function stripTags(str) {
    return str.replace(/<[^>]*>/g, '');
}

let html = '<p>これは<strong>HTMLタグ</strong>を含む文字列です。</p>';
console.log(stripTags(html));

実行結果

これはHTMLタグを含む文字列です。

このコードでは、正規表現 /<[^>]*>/g を使ってHTMLタグを検索し、空文字列で置換しています。

この正規表現は、< と > の間にある任意の文字列にマッチします。

このように、replaceメソッドを使えば、ユーザー入力からHTMLタグを簡単に取り除くことができます。

ただし、本格的なサニタイズを行うには、専用のライブラリを使うことをおすすめします。

○サンプルコード9：URLからクエリパラメータを取得

Webアプリケーションを開発していると、URLからクエリパラメータを取得したい場面によく遭遇します。

クエリパラメータとは、URLの末尾に ? に続けて記述されるキーと値のペアのことです。

replaceメソッドを使えば、URLからクエリパラメータを簡単に取得できます。

コードを見てみましょう。

function getQueryParams(url) {
    let params = {};
    url.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(match, key, value) {
        params[key] = value;
    });
    return params;
}

let url = 'https://example.com/search?q=javascript&sort=desc';
console.log(getQueryParams(url));

実行結果

{ q: 'javascript', sort: 'desc' }

このコードでは、正規表現 /[?&]+([^=&]+)=([^&]*)/gi を使ってクエリパラメータを検索し、マッチした部分をキーと値に分解してオブジェクトに格納しています。

正規表現の解説をすると、[?&]+ は ? または & の1文字以上の繰り返しにマッチし、([^=&]+) はクエリパラメータのキー、= は等号、([^&]*) はクエリパラメータの値にマッチします。

このように、replaceメソッドと正規表現を組み合わせることで、URLの解析もスマートに行えます。

○サンプルコード10：スネークケースからキャメルケースへの変換

JavaScriptでは、変数名や関数名にキャメルケース（camelCase）を使うのが一般的ですが、APIのレスポンスなどでは、スネークケース（snake_case）が使われていることもあります。

そんな時、replaceメソッドを使えば、スネークケースをキャメルケースに簡単に変換できます。

コードを見てみましょう。

function snakeToCamel(str) {
    return str.replace(/_[a-z]/g, function(match) {
        return match.slice(1).toUpperCase();
    });
}

console.log(snakeToCamel('hello_world')); 
console.log(snakeToCamel('this_is_a_long_variable_name'));

実行結果

helloWorld
thisIsALongVariableName

このコードでは、正規表現 /_[a-z]/g を使ってアンダースコア（_）に続く小文字を検索し、マッチした部分から2文字目を大文字に変換しています。

具体的には、match.slice(1) でアンダースコアを除いた部分文字列を取得し、toUpperCase() でその先頭文字を大文字に変換しているわけです。

このように、replaceメソッドを使えば、名前の表記法の変換も簡単に行えます。

○サンプルコード11：カンマ区切りの数値を配列に変換

最後に、カンマ区切りの数値文字列を数値の配列に変換する例を見てみましょう。

このようなデータ形式の変換は、データ処理の場面でよく遭遇します。

コードを見てみましょう。

function parseNumbers(str) {
    return str.replace(/(\d+)/g, '$1').split(',').map(Number);
}

console.log(parseNumbers('1,2,3,4,5')); 
console.log(parseNumbers('10,20,30,40,50'));

実行結果