replaceに変数を使ってグローバルマッチさせる2つの方法

やりたいこと

index.htmlの全ての「も」を「M」に置換したいとします。

index.html

<p id='test'>すもももももももものうち</p>

問題

置換したい文字列を変数beforeに代入します。変数beforeをreplaceにそのまま入れると、最初の該当箇所しか置換されません。

test1.js

var before = "も";
var after = "M";
var txt = $("#test").html();

var replaceText = txt.replace(before,after);
$("#test").html(replaceText);
//出力結果:すMももももももものうち

解決策1

該当箇所全てを置換するにはRegExp オブジェクトにグローバルマッチのフラグ (g)をつけます。

test2.js

var replaceText = txt.replace(new RegExp(before,"g"),after);
//出力結果:すMMMMMMMMのうち

解決策2

変数beforeに最初からフラグをつけておきます。

test3.js

var before = /も/g;
var after = "M";
var txt = $("#test").html();

var replaceText = txt.replace(before,after);
$("#test").html(replaceText);
//出力結果:すMMMMMMMMのうち

・参考ページ
String.replace - JavaScript | MDN(https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace)