MENU

文字列操作正規表現

【JavaScript】 replaceAllとは replaceとの違い

更新日:2021/07/06

ECMAScript2021よりStringオブジェクトにreplaceAllメソッドが追加されました。

 

今回はこのreplaceAllメソッドについてと、既存のreplaceメソッドとの違いについてお伝えします。

 

 


こちらの自作ツールもよろしくお願いします。

replaceAllとreplaceの使用方法はほぼ同じ

 

replaceAllとreplaceの使用方法は、ほぼ同じです。

 

例えば、次のような構文で使用したとき、元の文字列を引数の内容にしたがって置き換えます。

 

構文: 元になる文字列.replace( 置き換え前の文字列 , 置き換え後の文字列 )

 

異なるのが、replaceAllは全ての一致を置き換えるのに対して、replaceは最初に一致したもののという点です。

 

実行例

 


console.log( "abcdabcd".replaceAll( "b" , "B" ) ); // aBcdaBcd

console.log( "abcdabcd".replace( "b" , "B" ) ); // aBcdabcd

 

上の例で、replaceAllは全ての文字列"b"を文字列"B"に置換しています。

 

一方、replaceは最初の文字列"b"だけを文字列"B"に置換しています。

 

 

正規表現はgフラグが必要

 

もう一点異なるのが、置き換え前の文字列に正規表現を使用した場合、gフラグが必要なことです。

 

次のようにgフラグを指定しないと、エラーになります。

 

gフラグを指定しないとエラー

 


console.log( "a1b2c3".replaceAll(/\d/, ".") );
 // TypeError: replaceAll must be called with a global RegExp

 

必ず、次のようにgフラグを指定してください。

 

gフラグを指定する

 


console.log( "a1b2c3".replaceAll(/\d/g, ".") ); // a.b.c.

 

これは、replaceメソッドと同じ結果になります。

 

replaceも同じ結果

 


console.log( "a1b2c3".replace(/\d/g, ".") ); // a.b.c.

 // gフラグなしの場合
console.log( "a1b2c3".replace(/\d/, ".") ); // a.b2c3

 

つまり正規表現での置換については、replaceAllとreplaceのどちらを使用しても同じです。

詳しい使用方法

 

replaceの詳しい使用方法を、別の記事でお伝えしています。

 

replaceAllもほぼ同じですので、そちらの記事をご覧ください。

 

スポンサーリンク

記事の内容について

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

OFUSEを設置してみました。
応援いただけると嬉しいです。