【JavaScript】replace / replaceAll – 文字列の一部を別の文字列に置き換えるメソッド

JavaScriptのreplace()とreplaceAll()は、文字列の一部を別の文字列に置き換えるメソッドです。文字列の加工やデータの整形をする際に便利なメソッドなので、基本的な使い方や注意点をまとめていきたいと思います。

目次非表示

replace() メソッドとは？

replace()は、指定した文字列や正規表現に一致する最初の1つの部分を置き換えるメソッドです。

JavaScript

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

JavaScript

const text = 'Hello Coffee!';
console.log(text.replace('Coffee', 'Donut')); // "Hello Donut!"

JavaScript

const text = 'ホットコーヒーとホットカフェラテをお願いします。';
console.log(text.replace(/ホット/, 'アイス')); // "アイスコーヒーとホットカフェラテをお願いします。"

※replace()は最初に一致したもののみを置き換えます。

replaceAll()はreplace()と似ていますが、一致するすべての部分を置き換えます。

JavaScript

文字列.replaceAll(検索する値, 置換後の値)

JavaScript

const text = 'ホットコーヒーとホットカフェラテをお願いします。';
console.log(text.replaceAll('ホット', 'アイス')); // "アイスコーヒーとアイスカフェラテをお願いします。"

JavaScript

const text = 'abc abc abc';
console.log(text.replaceAll(/abc/g, 'xyz')); // "xyz xyz xyz"

※replaceAll()は ES2021以降 のメソッドなので、古いブラウザでは動作しない可能性があります。

JavaScript

const sentence = 'コーヒーは最高！コーヒーはおいしい！';
console.log(sentence.replace(/コーヒー/gi, '紅茶')); // "紅茶は最高！紅茶はおいしい！"

JavaScript

const menu = 'cappuccino';
const order = 'Can I hav a MENU?';
console.log(order.replace('MENU', menu)); // "Can I hav a cappuccino!"

JavaScript

console.log('coffee coffee coffee'.replace('coffee', 'cappuccino')); // "cappuccino coffee coffee"

すべて置き換えたい場合は replaceAll()または/gを使用しましょう。

replace() / replaceAll()はデフォルトで大文字小文字を区別します。

JavaScript

console.log('Hello Coffee'.replace('coffee', 'Donut')); // "Hello Coffee"（変更なし）

大文字小文字を無視するには、正規表現/iを使用します。