10 回閲覧されました

みなさんこんにちは、jonioです。

今回はJavaScriptの.replace()について簡単なサンプルコードで解説します。

Laravelの無料学習サイトを作りました

Laravelを勉強したい人向けの無料の学習サイトを作りました。

ここからリンクに飛べますのでぜひ利用してください。

.replace()とは

文字列の一部を別の文字列に置き換える メソッドです。

元の文字列は変わらない非破壊的なメソッドです。

サンプルコードで見ていきます。

サンプルコード

下記のコードで考えます。

const s = "apple banana grape";
console.log(s.replace("apple", "orange"));

const s = "apple banana grape";
console.log(s.replace("apple", "orange"));

.replaceの第一引数が変換する対象の文字列(apple)で第二引数が変換後の文字列(orange)です。

結果は下記です。

"orange banana grape"

"orange banana grape"

挙動は結果の通りですが変換したい文字列が下記だったとします。

const s = "apple banana apple";

const s = "apple banana apple";

この場合は.replace()を使うと最初にヒットするappleしか変換することができません。

const s = "apple banana apple";
console.log(s.replace("apple", "orange"));

// 結果は下記
"orange banana apple"

const s = "apple banana apple";
console.log(s.replace("apple", "orange"));

// 結果は下記
"orange banana apple"

2つ(全て)のappleを両方とも変換するのに方法は2通りあります。

1つ目の方法は正規表現を使います。

const s = "apple banana apple";

console.log(s.replace(/apple/g, "orange"));

const s = "apple banana apple";

console.log(s.replace(/apple/g, "orange"));

2つ目の方法は.replaceAll()を使います。

const s = "apple banana apple";

console.log(s.replaceAll("apple", "orange"));

const s = "apple banana apple";

console.log(s.replaceAll("apple", "orange"));

結果は2つの方法共に下記になります。

// "orange banana orange"

// "orange banana orange"