本サイトではアフィリエイト広告を利用しています
JavaScript でかんたんに全置換する方法

コード ハウツー 正規表現

[初級]JavaScript でかんたんに全置換する方法

長い長文をさっさと JavaScript で置換したいときに、私がままでダサいコードを書いていたので、昨年の小反省を込めてメモ書きです。

本ページはこんな方におすすめ

  • JavaScript でかんたんに全置換したい

全置換の基礎

ここで言う全置換は次のような意味です。

'lovelovelovelovelove' を 'havehavehavehavehave' 置換したい。

'love' を 'have' に置換するだけなら簡単です。

'I love apples'.replace('love', 'have');

これはもちろん、"I have apples" となります。

でも、'lovelovelovelovelove' をまとめて 'havehavehavehavehave' に置換したい場合は通じません。

'lovelovelovelovelove'.replace('love', 'have');

これは "havelovelovelovelove" となり、一番はじめに出てきた 'love' を 'have' に置換するだけです。

ここまでは、ド常識なので私はいつも正規表現で目的を達成していました。

次のような、正規表現の全置換コードを普通に書いていました。

'lovelovelovelovelove'.replace(/love/g, 'have');

これで、'havehavehavehavehave' となり目的は達成できます。

しかし、欲を言えば、特別必要なとき以外は正規表現は多用しないほうが利口です。
正規表現置換は、思いの外メモリを食い、古いマシンだと動作が緩慢になることもあります。
また、コードを悪意的に書き換えるプラグインがクライアント側のマシンで動作した場合、思った結果にならないこともよくあります(真っ白なページが返るなど)。

このことは私も意識はしていましたが、正規表現が便利すぎるのでそのうちなんとか程度にしか考えていませんでした。

現在のおすすめ全置換メソッド

ところが、昨年あたりから "String.prototype.replaceAll" というメソッドが提供されています。

例のような、大した内容でもない全置換はこちらのメソッドを使うべきでしょう。わざわざ正規表現を使う必要はなさそうです。

'lovelovelovelovelove'.replaceAll(/love/g, 'have');

これでも同様、'havehavehavehavehave' となり目的は達成できました。

replaceAll は覚えやすいので、今までわざわざ正規表現を使ってきた部分を簡単に書き換え可能です。
ここまでシンプルだと、コードの書き換え時のミスも抑えられるはずです。

知らなかった人は試してみてください。

-コード, ハウツー, 正規表現
-,