• 1．JavaScriptのreplaceメソッドとは？
• 2．replaceメソッドの基本的な使い方
• 3．複数置換する方法
• 4．$記号を使って特別な値で置換する方法
• 5．replaceメソッドが使えない原因と解決策

今回は、文字列の置換でよく使用されるJavaScriptの「replaceメソッド」について学習していきましょう。

本記事では、

「replaceメソッドの基本的な使い方」や「複数置換する方法」

といった基本的な内容から、

「replaceメソッドが使えない原因と解決策は？」

といった内容まで、初級者エンジニア向けに詳しく解説していきます。

1．JavaScriptのreplaceメソッドとは？

JavaScriptのreplaceメソッドとは、パターンに一致する文字列の一部またはすべてを別の文字列に置換し、新しい文字列として返すメソッドのことです。パターンには文字列または正規表現を指定します。

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

まずはreplaceメソッドの基本的な使い方について解説していきます。

①基本構文

replaceメソッドの基本構文は以下の通りです。

let str = 文字列;

let newstr = str.replace(検索文字列,置換する文字列);

“文字列”の中から”検索文字列”を検索し、一致する文字を”置換する文字列”に置き換えます。

引数

replaceメソッドの引数について説明していきます。

まずは、第1引数に検索文字を使用する例から見てみましょう。

replace(searchString, newString)
replace(searchString, replaceFunction)

元の文字列の中から第1引数のsearchStringを検索し、一致する文字を第2引数のnewStringまたはreplaceFunctionの戻り値に置き換えます。

次に、第1引数に正規表現を使用する場合について説明します。

replace(regexp, newString)
replace(regexp, replaceFunction)

第1引数のregexpは、正規表現のRegExpオブジェクト、またはリテラルです。元の文字列と一致すると、第2引数のnewStringまたはreplaceFunctionの戻り値に置き換えます。

②任意の文字列を置換する

基本構文を押さえたところで、実際のコードで文字列を置換する方法を見ていきましょう。

これはyyyymmddを日付の”2022-08-22”に置換するコードです。

let str = "day_yyyymmdd";
let newstr = str.replace("yyyymmdd","2022-08-22")

console.log(newstr);

実行結果：

day_2022-08-22

文字列指定だと複数の置換ができないので注意

replaceメソッドの第1引数に文字列を指定した場合、複数置換ができません。

サンプルコードで確認してみましょう。

let str = "potato hamburger potato hamburger juice chicken";
let newstr = str.replace("potato","ポテト")

console.log(newstr);

実行結果：

ポテト hamburger potato hamburger juice chicken

サンプルコードは、replaceメソッドの第1引数に”potato”を指定し、第2引数の”ポテト”に置換するようにしています。変数str中に”potato”は2つありますが、先頭のみが”ポテト”に置き換えられるのがわかりますね。

3．複数置換する方法

では、どうすれば複数置換できるのでしょうか？

複数置換する方法として、”正規表現を使う”または”replaceAllメソッドを使う”の2種類があります。以下で詳しく説明します。

①正規表現を使う

正規表現のgオプションフラグを使うと、複数置換できます。gオプションフラグは「グローバルリサーチ」と呼ばれ、文字列全体で見つかった全てのパターンをマッチさせる役割があります。

サンプルコードを見てみましょう。

let str = "potato hamburger potato hamburger juice chicken";
let newstr = str.replace(/potato/g,"ポテト")

console.log(newstr);

実行結果：

ポテト hamburger ポテト hamburger juice chicken

正規表現のgオプションフラグを使うと、複数置換できることがわかりますね。

②replaceAllメソッドを使う

replaceAllメソッドで置換する方法も確認してみましょう。

let str = "potato hamburger potato hamburger juice chicken";
let newstr = str.replaceAll("potato","ポテト")

console.log(newstr);

実行結果：

ポテト hamburger ポテト hamburger juice chicken

正規表現のgオプションフラグを使う場合と同様に、replaceAllメソッドでも複数置換できます。

4．$記号を使って特別な値で置換する方法

replaceメソッドの第2引数に、置換する文字列として$記号を指定できます。

$記号の意味をまとめましたのでご確認ください。

サンプルコードで確認してみましょう。

let str = "PotatoHamburgerChicken";
let newstr1 = str.replace("Hamburger","_$&_")
console.log(newstr1);

実行結果：

Potato_Hamburger_Chicken

検索文字列が”Hamburger”で、第2引数に”$&”を指定しているので、置換文字列は”Hamburger”になります。

次に、”$`”を使用したサンプルコードを見てみましょう。

let str = "PotatoHamburgerChicken";
let newstr2 = str.replace("Hamburger","_$`_")
console.log(newstr2);

実行結果：

Potato_Potato_Chicken

第2引数に”$`”を指定すると、マッチした部分の前の文字列を置換するので、”Hamburger”が”Potato”に置換されます。

最後に、”$’”を使ったサンプルコードを確認しましょう。

let str = "PotatoHamburgerChicken";
let newstr3 = str.replace("Hamburger","_$'_")
console.log(newstr3);

実行結果：

Potato_Chicken_Chicken

“$’”を指定するとマッチした部分の後の文字列を置換するので、今回は”Hamburger”が”Chicken”に置換されます。

5．replaceメソッドが使えない原因と解決策

replaceメソッドが使えないときによくある原因と解決策を紹介します。

①一致する文字列が複数ある

2-②で説明したように、replaceメソッドの第1引数に文字列を指定した場合、複数置換ができないので注意が必要です。複数置換する場合は、第1引数に正規表現を指定するか、replaceAllメソッドを使用しましょう。

②正規表現をクオーテーションで囲っている

replaceメソッドが期待通りの動作をしない原因に、正規表現をクオーテーションやダブルクオテーションで囲って指定しているケースがあります。

サンプルコードで確認してみましょう。

let str = 'index.html';
let newstr = str.replace('/\.html/','.js');

console.log(newstr);

実行結果：

index.html

サンプルコードは、拡張子のhtmlをjsに置換することを期待するコードですが、正規表現をクオテーションで囲っているので、期待通りの結果になりません。

これは正規表現をクオテーションで囲っているため、文字列として認識されてしまうのが原因です。

正しい記述方法でコーディングしてみましょう。

let str = 'index.html';
let newstr = str.replace(/\.html/,'.js');

console.log(newstr);

実行結果：

index.js

このように、正規表現を指定する場合、クオテーション等で囲まないように注意しましょう。

※掲載された社名、製品名は、各社の商標及び登録商標です。