jQueryとjsのreplaceで文字列を置き換える

jQueryとJavaScriptのreplaceで文字列を置き換えるサンプルです。

Web画面のPタグやクラスの指定にjQueryのセレクタを使用し、文字列の変換はJavaScriptのreplaceで行います。

目次	指定の文字を置き換える
	複数の同じ文字を置き換る
	複数の異なる文字を置き換る

指定の文字を置き換える

文字を置き換るサンプル

ボタンを押すと、文字が変わります。

テスト:あいうえおあいうえお

上記サンプルのコードです。

<p>テスト:<span id="span1">あいうえおあいうえお</span></p>
<input type="button" id="button1" value="ボタン1" />
<input type="button" id="button2" value="ボタン2" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $("#button1").click(function () {
    $("#span1").text($("#span1").text().replace("あいう", "AAA"));
  });

  $("#button2").click(function () {
    $("#span1").text($("#span1").text().replace("AAA", "あいう"));
  });
</script>

replaceメソッドの１つ目の引数が置き換え対象の文字列で、2つ目の引数が置換後の文字列です。
replaceの置換では正規表現を使用できます。
JavaScript replace 文字列を置換する(正規表現)

複数の同じ文字を置き換る

文字を置き換るサンプル

ボタンを押すと、文字が変わります。

テスト:あいうあいう

上記サンプルのコードです。

<p>テスト:<span id="span3">あいうあいう</span></p>
<input type="button" id="button5" value="ボタン5" />
<input type="button" id="button6" value="ボタン6" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $("#button5").click(function () {
    $("#span3").text($("#span3").text().replace(/い/g, "B"));
  });

  $("#button6").click(function () {
    $("#span3").text($("#span3").text().replace(/B/g, "い"));
  });
</script>

複数の同じ文字を置き換る場合は、正規表現のオプションのgを使用します。
gはマッチしたものをすべて返します。

複数の異なる文字を置き換る

文字を置き換るサンプル

ボタンを押すと、文字が変わります。

テスト:あいうえおあいうえお

上記サンプルのコードです。

<p>テスト:<span id="span2">あいうえおあいうえお</span></p>
<input type="button" id="button3" value="ボタン3" />
<input type="button" id="button4" value="ボタン4" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $("#button3").click(function () {
    $("#span2").text(
      $("#span2").text().replace("あい", "AA").replace("えお", "BB")
    );
  });

  $("#button4").click(function () {
    $("#span2").text(
      $("#span2").text().replace("AA", "あい").replace("BB", "えお")
    );
  });
</script>

複数の異なる文字を置き換る場合は、replaceメソッドを続けます。
8,9行目は同じ「$("#span2").text」ですがこの場合では必要です。
14,15行目も同じです。