JavaScriptのreplaceAllの使い方！文字列をすべて置換する

JavaScriptで指定された部分文字列を、すべて新しい部分文字列に置き換えるreplaceAllメソッドについて書いています。
replaceAllメソッドを使うと、文字列内の特定の文字列をすべて別の文字列に一括で置換できます。

文字列内の特定の文字列をすべて置換したい場合に便利です。
実際に動くサンプルを使って、以下の操作を解説します。

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

replaceAllメソッドは、文字列の指定された部分文字列を、すべて新しい部分文字列に置き換えて、新しい文字列を返します。
基本的な構文は以下のとおりです。

string.replaceAll(searchValue, replaceValue)

• searchValue: 置換対象の文字列または正規表現。
  • 文字列またはRegExpオブジェクト（必須）。
  • 正規表現を使用する場合は、gフラグが必要です。
• replaceValue: 置換後の文字列。
  • 文字列（必須）。
  • 置換後の文字列に関数を指定することも可能です。

文字列内のすべての部分文字列を置換する

文字列の指定文字を全て置換してみます。

const str = 'Hello World! Hello!';

console.log(str.replaceAll('Hello', 'Hi')); // 結果：Hi World! Hi!

まず、str変数に文字列を代入しています。
そして、str変数の中のすべての’Hello’を’Hi’に置換しています。

結果2つが置換されて、「Hi World! Hi!」が出力されます。

正規表現を使って置換する

正規表現を使って、文字列をすべて置換してみます。

const str = 'Hello World! hello!';

console.log(str.replaceAll(/hello/gi, 'Hi')); // 結果：Hi World! Hi!

str変数の文字列を、正規表現を使って置換しています。

iオプションを指定して、大文字小文字を区別せずにすべての’hello’を’Hi’に置換しています。
gフラグはすべてのマッチを置換し、iフラグは大文字小文字を区別しません。

結果「Hello」と「hello」のどちらも対象になり、「Hi World! Hi!」が出力されます。

replaceメソッドとの違い

replaceAllメソッドとreplaceメソッドは、どちらも文字列を置換するために使用されます。
しかし、両者の間にはいくつかの違いがあります。

• 置換対象:
  • replaceメソッドは、最初にマッチした部分文字列のみを置換します。
  • replaceAllメソッドは、すべてのマッチした部分文字列を置換します。
• 正規表現のgフラグ:
  • replaceメソッドで正規表現を使用する場合、gフラグがないと最初にマッチした部分文字列のみを置換します。
  • replaceAllメソッドで正規表現を使用する場合、gフラグが必須です。

JavaScriptのreplaceAllメソッドの使い方まとめ

今回はJavaScriptのreplaceAllメソッドの使い方について解説しました。
この記事の内容をまとめます。