JavaScript String replaceAll

概要: このチュートリアルでは、部分文字列のすべての出現箇所を新しい文字列に置き換える String replaceAll() メソッドについて学習します。

JavaScript string replaceAll() メソッドの概要

String replace() メソッドを使用すると、文字列内の部分文字列の最初の出現箇所を新しい文字列に置き換えることができます。

部分文字列のすべての出現箇所を新しい文字列に置き換えるには、replace() メソッドを繰り返し呼び出すか、グローバルフラグ (g) を指定した正規表現を使用します。

ES2021 では、パターンのすべての一致を置換文字列で置き換えた新しい文字列を返す String replaceAll() メソッドが導入されました。

String.prototype.replaceAll(pattern, replacement)Code language: CSS (css)

pattern は、文字列または 正規表現 を使用できます。 pattern が正規表現の場合、グローバルフラグ (g) を含める必要があります。 そうしないと、replaceAll() は例外をスローします。

これは、ミスをして、パターンに一致する最初の出現箇所のみを置き換えるために replace() メソッドを使用するべきだったことを前提としています。

replacement 引数は、文字列、または各一致に対して呼び出される コールバック関数 を使用できます。

replacement がコールバック関数の場合は、次の形式になります。

replacement(match, offset, str)

replacement コールバックには、次の引数があります。

• match は、一致した部分文字列です。
• offset は、元の文字列内での一致した部分文字列のオフセットです。たとえば、元の文字列が 'Hello' で、一致した部分文字列が 'll' の場合、offset は 2 になります。
• str は、元の文字列です。

replace() メソッドと同様に、replaceAll() メソッドは元の文字列を変更しません。パターンが置換文字列で置き換えられた、完全に新しい文字列を返します。

JavaScript String replaceAll() の例

JavaScript String replaceAll() メソッドを使用する例をいくつか見てみましょう。

1) シンプルな JavaScript String replaceAll() の例

次の例では、String replaceAll() メソッドを使用して、文字列「JS will, JS will, JS will rock you」内の文字列 JS を文字列 JavaScript に置き換えています。

let str = 'JS will, JS will, JS will rock you.';
let newStr = str.replaceAll('JS','JavaScript');

console.log(newStr);Code language: JavaScript (javascript)

出力

JavaScript will, JavaScript will, JavaScript will rock you. 

2) コールバック関数を使用した JavaScript String replaceAll() の例

次の例では、String replaceAll() メソッドを使用して、正規表現で部分文字列を検索しています。各一致は、コールバック関数によって決定される特定の置換文字列に置き換えられます。

let str = 'JS will, Js will, js will rock you.';

let pattern = /js/gi;

str.replaceAll(pattern, function(match, offset, str) {
    if(match === 'JS') return 'JavaScript';
    if(match === 'Js') return 'Javascript';
    if(match === 'js') return 'javascript';
    return '';
});

console.log(newStr);Code language: JavaScript (javascript)

出力

JavaScript will, Javascript will, javascript will rock you. 

仕組み

正規表現 /js/gi は、大文字と小文字を区別せずに部分文字列 JS（つまり、JS、Js、または js）を含む文字列に一致します。

replaceAll() メソッドは、部分文字列 JS、Js、および js を置換コールバックの戻り値に置き換えます。

まとめ

• JavaScript string replaceAll() メソッドを使用して、文字列内の部分文字列のすべての出現箇所を新しい文字列に置き換えます。