【置換に便利！】replaceを使って複数回出現する文字列を置換するjs
Web2017年7月17日
何かしらのイベントに応じて文字列の置換や削除を行いたい場合、jsでreplace()を使って処理するととても便利です。本記事ではreplace()で文字を置換するテクニックについてご紹介させていただきたいと思います。
サンプルコード（マッチした文字列の1つめだけを置換）
html
<p class="hoge">ほげほげほげほげほげほげほげほげほげほげ</p>
<p class="hoge-btn"><a href="#">クリックしたら「ほげ」を「もげ」に置換</a></p>js
$(function(){
'use scrict';
$('p.hoge-btn a').click(function(){
var $hoge = $('p.hoge').html();
$('p.hoge').html($hoge.replace('ほげ','もげ'));
return false;
});
});サンプルコード（マッチした文字列を全て置換）
html
<p class="moge">もげもげもげもげもげもげもげもげもげもげもげ</p>
<p class="moge-btn"><a href="#">クリックしたら「もげ」を「ふが」に置換</a></p>js
$(function(){
'use scrict';
$('p.moge-btn a').click(function(){
var $moge = $('p.moge').html();
$('p.moge').html($moge.replace(/もげ/g,'ふが'));
return false;
});
});サンプルコード（複数のマッチした文字列を置換）
html
<p class="fuga">ほげほげほげほげほげもげもげもげもげもげ</p>
<p class="fuga-btn"><a href="#">クリックしたら「ほげ」も「もげ」も「ふが」に置換</a></p>js
$(function(){
'use scrict';
$('p.fuga-btn a').click(function(){
var $fuga = $('p.fuga').html();
$('p.fuga').html($fuga.replace(/ほげ|もげ/g,'ふが'));
return false;
});
});- ※jQueryを読み込んでいる場合のスクリプトとなります
解説
replace()を使って、「replace('置換前の文字列','置換後の文字列')」を指定します。また、正規表現の駆使すると様々なパターンの置換が可能になります。2つめと3つめのサンプルコードではオプションに/gを指定することで、「マッチしたその後の文字列も置換する」ようにしています。
また、3つめのサンプルでは「ほげ」も「もげ」も置換されるよう、「|」で区切って複数指定しています。
なぜわざわざ文字列を一度変数に格納してDOMを生成し直しているか？
「$('p.hoge').replace('ほげ','もげ');」じゃなくてなんでわざわざ変数に入れて置換してからhtml()しているの？と疑問に思われるかもしれませんが、これはreplace()は文字列に対して行われるため、直接htmlの要素オブジェクトに対して実行しても動作しないためです。要素内の文字列を取得して変数に格納後、置換してから再度DOMを生成する必要があるというわけです。
デモ
実際に動作を確認できるデモページも公開しておりますのであわせてご確認ください。
まとめ
jQueryを使ってページの読み込み時やクリック時などの「文字列を置き換える」必要のあるシーンは結構あるので、replace()は覚えておきたいテクニックの一つです。ぜひご参考にしていただければ幸いです。