JavaScriptのreplaceメソッドを使いこなす！文字列を自在に置換する方法

2024-04-27

当サイトでは一部リンクに広告が含まれています

JavaScriptのreplaceメソッドを使うと、文字列中の任意の文字を別の文字に置き換えることができます。

特に、正規表現と組み合わせることで、文字列の置換をより柔軟かつ効率的に行うことが可能です。

この記事では、JavaScriptのreplaceメソッドについて、以下の流れで詳しく解説します。

replaceメソッドの基本的な使い方
正規表現を使った高度な置換方法
特殊な置換パターン
実用的な置換の例

初心者にもわかりやすいよう、丁寧に説明していきますので、ぜひ最後までご覧ください！

この記事を書いた人

未経験からWebエンジニアとして転職成功（年収 30% アップ）
現役のフルスタックエンジニアとして活躍中
開発チームリーダーとして複数プロジェクトをリード
副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ

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

まずは、replaceメソッドの基本的な使い方から見ていきましょう。
replaceメソッドは、文字列の中から指定した文字列を検索し、それを別の文字列に置き換えるメソッドです。

基本的な構文は次の通りです。

文字列.replace(検索する文字列, 置換後の文字列);

例えば、以下のようにして使います。

let str = "I love JavaScript!";
let newStr = str.replace("JavaScript", "TypeScript");

console.log(newStr);  // "I love TypeScript!"

この例では、文字列strの中にある”JavaScript”という文字列を、”TypeScript”に置き換えています。
置換後の文字列は、replaceメソッドの戻り値として返されるので、新しい変数newStrに代入しています。

大文字と小文字の区別

replaceメソッドは、デフォルトでは大文字と小文字を区別して検索します。
つまり、検索する文字列と完全に一致する部分だけが置換の対象になります。

let str = "I love Javascript!";
let newStr = str.replace("javascript", "TypeScript");

console.log(newStr);  // "I love Javascript!"

この例では、strの中に”javascript”（小文字）は存在しないので、置換は行われません。

複数の置換

replaceメソッドは、最初に一致した部分だけを置換します。
文字列中に同じ文字列が複数ある場合でも、最初の1つだけが置換の対象になります。

let str = "JavaScript is fun. I love JavaScript!";
let newStr = str.replace("JavaScript", "TypeScript");

console.log(newStr);  // "TypeScript is fun. I love JavaScript!"

この例では、最初の”JavaScript”だけが”TypeScript”に置換され、2つ目の”JavaScript”はそのまま残っています。

文字列中のすべての部分を置換したい場合は、正規表現を使う必要があります。これについては次の章で詳しく説明します。

正規表現を使った高度な置換方法

replaceメソッドの第1引数には、文字列だけでなく正規表現（RegExp）オブジェクトも指定できます。
これにより、より柔軟で高度な文字列の置換が可能になります。

正規表現の基本

正規表現は、/で囲んだパターンで表現します。
例えば、/hello/は”hello”という文字列にマッチする正規表現です。

let str = "Hello, world!";
let newStr = str.replace(/hello/, "Hi");

console.log(newStr);  // "Hi, world!"

正規表現では、特別な意味を持つメタ文字を使うことで、より柔軟なパターンマッチングができます。
例えば:

.（ドット）は任意の1文字にマッチ
\dは任意の数字1文字にマッチ
\wは任意の英数字とアンダースコア1文字にマッチ

また、量指定子を使うと、直前の文字の繰り返しを表現できます。
例えば:

*は直前の文字の0回以上の繰り返し
+は直前の文字の1回以上の繰り返し
{3}は直前の文字の3回の繰り返し

これらを組み合わせることで、非常に柔軟なパターンを表現できます。

let str = "abc123def456";
let newStr = str.replace(/\d+/g, "X");

console.log(newStr);  // "abcXdefX"

この例では、\d+で数字の連続にマッチし、それを”X”に置き換えています。
正規表現の後ろにあるgは、グローバルフラグといい、文字列中のすべてのマッチ部分を置換対象にします。

キャプチャグループと特殊変数

正規表現では、丸括弧()を使ってグループ化することができます。
これをキャプチャグループといい、マッチした部分を後で参照できるようにします。

キャプチャグループにマッチした部分は、特殊変数$1, $2, …で参照できます。
これを使うと、マッチした部分を置換文字列に組み込むことができます。

let str = "John Smith";
let newStr = str.replace(/(\w+)\s(\w+)/, "$2, $1");

console.log(newStr);  // "Smith, John"

この例では、正規表現/(\w+)\s(\w+)/が”John Smith”にマッチし、1つ目のキャプチャグループ(\w+)が”John”、2つ目のキャプチャグループが”Smith”にマッチします。
置換文字列"$2, $1"は、これらのキャプチャグループを入れ替えて”, “で結合しています。

関数を使った置換

replaceメソッドの第2引数には、置換文字列だけでなく関数を指定することもできます。
これにより、マッチした部分に応じて動的に置換文字列を生成できます。

let str = "abc123def456";
let newStr = str.replace(/\d+/g, function(match) {
    return match * 2;
});

console.log(newStr);  // "abc246def912"

この例では、数字の連続にマッチする正規表現に対して、マッチした部分（match）を2倍にする関数を指定しています。
これにより、”123″は”246″に、”456″は”912″に置換されます。

置換関数には、マッチした文字列だけでなく、キャプチャグループの値やマッチした位置などの情報も渡されます。
これらを活用することで、さらに高度な置換処理が可能になります。

特殊な置換パターン

replaceメソッドの置換文字列では、$記号を使っていくつかの特殊なパターンを表現できます。

よく使われるものを以下にまとめます。

パターン	説明
`$$`	$記号自体を表す
`$&`	マッチした部分全体
$`	マッチした部分の前の部分
`$'`	マッチした部分の後ろの部分
`$n`	n番目のキャプチャグループ（n は1以上の整数）

例えば、次のようなコードを考えてみましょう。

let str = "Hello, world!";
let newStr = str.replace(/(\w+), (\w+)!/, "$2 $1$$");

console.log(newStr);  // "world Hello$"

この例では、$2 がキャプチャグループ (\w+) の2つ目にマッチした “world” に、$1 が1つ目にマッチした “Hello” に置き換えられ、$$ が文字通りの $ 記号に置き換えられます。

もう1つ例を見てみましょう。

let str = "abc123def";
let newStr = str.replace(/\d+/, "[$&]");

console.log(newStr);  // "abc[123]def"

この例では、$& がマッチした部分全体（この場合は “123”）に置き換えられ、それが [] で囲まれます。

実用的な置換の例

ここまで、replace メソッドと正規表現の基本的な使い方を見てきました。
最後に、実際の開発でよく出てくる置換の例をいくつか紹介します。

改行コードの置換

テキストデータ中の改行コード \n を br タグに置き換えるには、次のようにします。

let str = "Hello\nworld!";
let newStr = str.replace(/\n/g, "<br>");

console.log(newStr); // "Hello<br>world!"

URLのエスケープ

URLに含まれる特殊文字（&, = など）をエスケープするには、次のようにします。

let url = "https://example.com/search?q=hello&lang=en";
url = url.replace(/[&=]/g, encodeURIComponent);

console.log(url);
// "https://example.com/search?q=hello%26lang%3Den"

この例では、URLの & と = を encodeURIComponent 関数でエスケープしています。

数字の3桁区切り

数字を3桁ごとにカンマで区切るには、次のようにします。

let num = "1234567890";
let formatted = num.replace(/\d{1,3}(?=(?:\d{3})+(?!\d))/g, "$&,");

console.log(formatted);  // "1,234,567,890"

この例では、少し複雑な正規表現を使っています。
\d{1,3} で3桁以下の数字の塊にマッチし、(?=(?:\d{3})+(?!\d)) という 先読みで、その後ろに3の倍数桁の数字があることを確認しています。
マッチした部分 $& の後ろにカンマを付けることで、3桁ごとにカンマが挿入されます。