【JavaScript】指定した文字に一致したすべての文字を置換する方法

少し久しぶりな気がするJavaScriptネタ。
今回は、これまた業務中に質問された、文字列の置換について。
自分でも少しハマりやすいと思った点なので、おさらいもかねてまとめます。

文字列を置換するには、.replace() というメソッドを使います。
使い方は下記の通り。

var text = "あいうえお";
var replaceText = text.replace("あ","か");
document.write(replaceText);

こちらを実行した結果は、「かいうえお」となります。
変数text内の「あ」が「か」に置換されました。

で、ハマるポイントはここから。
上の例のように、置換したい文字が文字列に１つしかない場合はこちらでも問題ないのですが、置換したい文字が文字列の中に複数あった場合は、この方法ではうまくいきません。

例としては下記の通り。

var text = "あああああ";
var replaceText = text.replace("あ","か");
document.write(replaceText);

上記のコードを実行した結果は、「かああああ」となり、一番最初の「あ」しか置換されていません。
これを防ぐためには、正規表現を使うか、RegExpオブジェクトを使う方法があります。

まず、正規表現を使う方法は下記のとおり。

var text = "あああああ";
var replaceText = text.replace(/あ/g,"か");
document.write(replaceText);

こちらを実行すると、すべての「あ」が「か」に置換され、「かかかかか」と出力されます。

次に、RegExpオブジェクトを使う方法について。
RegExpは、正規表現用のオブジェクトであるとのこと。
あまり使ったことはないのですが、正規表現が苦手！という人にはこちらの方がわかりやすいのかも？

なお、下記の二つは同じ意味になります。

var regExp = /あ/g ;
var regExp = new RegExp( "あ", "g" ) ;

そして、RegExpを使ったコードの例は下記の通り。

var text = "あああああ";
var targetStr = "あ" ;
var regExp = new RegExp( targetStr, "g" ) ;
var replaceText = text.replace(regExp,"か");
document.write(replaceText);

こちらも実行した結果は「かかかかか」となります。

.replace()メソッドは便利ではありますが、単に文字列を指定するだけだと、最初にヒットした文字列しか置換されない、という点が要注意ですね。
久しぶりに使ったときは、この癖を忘れていて改めて調べ直してしまいました。
正規表現を使うという点が、苦手意識を持っている人には少しだけネックかもしれませんが…。
なお私はよく「正規表現チェッカー」というサイトで正規表現が正しいかどうか確認します。
ページ下部にリファレンスも載っているのでお勧めです。

正規表現チェッカー PHP: preg_match() / JavaScript: match()
http://okumocchi.jp/php/re.php