JavaScriptで文字列を置換する方法！(replaceメソッド)

JavaScriptで「対象の文字列」を「指定した文字列」に置換する方法について書いています。
文字列を置換したい場合にはreplaceメソッドを使うと良いです。

replaceメソッドの使い方を確認していきましょう。

文字列の1箇所のみ置換する

replaceメソッドは、文字列から呼び出して使うことができます。
例えば、下記のように使用します。

let text = "hello, world!".replace("hello", "こんにちは")
console.log(text) // こんにちは, world!

文字列の”hello, world!”から呼び出して使っています。
呼び出し元には変数を指定しても良いです。

replaceメソッドには第1引数に探したい値、第2引数に変換したい値を渡します。
今回は”hello”を探して、”こんにちは”に変換するようにしました。
結果、上記コードでは「こんにちは, world!」が出力されます。

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

replaceメソッドに文字列で、探す場所を渡した場合には複数置換できません。
例として、下記のように置換してみます。

let fruitText = "apple grape apple grape orange"
let text = fruitText.replace("apple", "りんご")
console.log(text) // りんご grape apple grape orange

fruitText変数に入れた文字列を置換しています。
replaceメソッドの第1引数に”apple”を指定して、”りんご”に変えるようにしました。

“apple”は対象文字列に2つありますが、先頭のみが”りんご”に置換されます。
結果として出力は「りんご grape apple grape orange」となります。

正規表現で複数置換する

複数箇所を置換してみます。
文字列内の全ての対象文字列を置換する場合には、正規表現で対象を指定します。

先ほどのコードを下記のように変えてみました。

let fruitText = "apple grape apple grape orange"
let text = fruitText.replace(/apple/g, "りんご")
console.log(text) // りんご grape りんご grape orange

replaceメソッドの第1引数に正規表現を渡しました。
これで、全ての文字列を置換することが可能です。

正規表現は「/」と「/」の間に書きます、今回は単純にappleに該当するものです。
「/」の後にgがついています。
これが正規表現のオプションで、全ての箇所を対象にしてくれます。

実際に置換して、結果を確認すると「りんご grape りんご grape orange」が出力されます。

置換する文字列を加工する

replaceメソッドの第2引数には、関数を指定することもできます。
関数を指定することで、置換対象になった文字列を加工することが可能です。

例えば、下記のように使うことができます。

const plusTax = (value) => {
  return parseInt(value) + (parseInt(value) * 0.10)
}

let fruitText = "りんごは200円で、バナナは100円"
let text = fruitText.replace(/\d{3}/gi, plusTax)
console.log(text) // りんごは220円で、バナナは110円

最初にplusTaxという関数を作成しています。
valueには文字列の数値(価格)が入る想定です。
valueの値を数値に変換して、消費税の10パーセント計算して返しています。

fruitText変数には「りんごは200円で、バナナは100円」という、数値を含んだ文字列を入れています。
replaceメソッドの第1引数には正規表現を指定して、数値3桁の箇所を対象にしています。

第2引数に作成したplusTax関数を指定しました。
こうすると、正規表現で対象になった値がplusTaxに渡されます。
今回の文字列の中でいうと200と100です。

渡された後にplusTax関数の中で、消費税を足した値が返ってきます。
結果として出力する内容は「りんごは220円で、バナナは110円」となります。

数値の箇所のみ正規表現で抜き出されて、関数で計算した結果が入ってきたことが確認できました。

replaceメソッドに渡す内容のまとめ

replaceメソッドに渡せる内容をまとめると下記のようになります。

第2引数で関数として受け取れる値としては、対象になった文字列以外も受け取ることが可能です。
MDNのこちらに詳しく書いてあるので、気になる場合は確認してみてください。