文字列内の文字列を置換する - JavaScript

JavaScriptで文字列内の文字列を置換するコードを紹介します。

概要

JavaScriptで文字列内の文字列を置換するには、String.prototype.replace() メソッドを利用します。

書式

(文字列の変数).replace((置換対象文字列),(置換文字列))

または

(文字列の変数).replace((置換対象文字列),(置換文字列),(フラグ))

置換された文字列が、replaceメソッドの戻り値として返ります。

フラグを指定する書式はブラウザ依存があるため、本記事では詳細な説明は省きます。
オプションのフラグは下記があります。

フラグ	意味
g	グローバルマッチ
i	大文字と小文字の違いを無視する
m	複数行を越えたマッチ

フラグは文字列で与えます。(例 "g", "gi")

書式例

mystring変数の"duck"を"penguin"に置換する場合は下記のコードとなります。

  mystring = mystring.replace("duck","penguin");

プログラム

コード

下記のHTMLファイルを準備します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <script type="text/javascript">
    function proc() {
      var input = document.getElementById("Text1").value;
      var pat = document.getElementById("Text2").value;
      var rep = document.getElementById("Text3").value;

      var result = input.replace(pat, rep);

      document.getElementById("Text4").value = result;
    }
  </script>
</head>
<body>
  入力<br />
  入力文字列<input id="Text1" type="text" size="40" /><br />
  対象文字列<input id="Text2" type="text" size="40" /><br />
  置換文字列<input id="Text3" type="text" size="40" /><br />
  <input id="Button1" type="button" value="処理" onclick="proc();" /><br />
  <hr/>
  結果<br />
  <input id="Text4" type="text" size="40" /><br />
</body>
</html>

解説

[処理]ボタンをクリックすると、JavaScriptのproc()関数を実行します。

proc関数内では下記のコードにより、[入力文字列]のテキストボックスに入力された文字列を input変数に、[対象文字列]のテキストボックスに入力された文字列を pat変数に、[置換文字列]のテキストボックスに入力された文字列を rep変数に格納します。

  var input = document.getElementById("Text1").value;
  var pat = document.getElementById("Text2").value;
  var rep = document.getElementById("Text3").value;

下記コードで、replaceメソッドを呼び出し、input変数に格納された文字列に対して、pat変数の文字列を、rep変数の文字列に置換します。置換した文字列はresult変数に代入します。

  var result = input.replace(pat, rep);

result変数の値を[結果]のテキストボックス(ext4のテキストボックス)に表示します。=

  document.getElementById("Text4").value = result;

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。

入力文字列、対象文字列、置換文字列のテキストボックスに入力します。入力後、[処理]ボタンをクリックします。

[入力文字列]内の[対象文字列]が[置換文字列]に置換された文字列が[結果]のテキストボックスに表示されます。

複数の置換候補がある場合の動作

複数の置換候補がある場合の動作を確認します。入力文字列、対象文字列、置換文字列を入力します。対象文字列の文字列が入力文字列内に2か所以上ある状態にします。

[処理]ボタンをクリックします。[結果]テキストボックスに置換された文字列が表示されます。が、最初の対象文字列のみが置換された結果となります。

補足：対象文字列をすべて置換するには？

以下の2つの方法があります。

正規表現を利用する

正規表現を利用した置換を実装します。replaceメソッドの第一引数に RegExpオブジェクトを与えます。与えるRegExオブジェクトはオブジェクトの生成時に"g"パラメーターを与え、マッチする対象すべてを置換する設定とします。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <script type="text/javascript">
    function proc() {
      var input = document.getElementById("Text1").value;
      var pat = document.getElementById("Text2").value;
      var rep = document.getElementById("Text3").value;

      var regex = new RegExp(pat, 'g');
      var result = input.replace(regex, rep);

      document.getElementById("Text4").value = result;
    }
  </script>
</head>
<body>
  入力<br />
  入力文字列<input id="Text1" type="text" size="40" /><br />
  対象文字列<input id="Text2" type="text" size="40" /><br />
  置換文字列<input id="Text3" type="text" size="40" /><br />
  <input id="Button1" type="button" value="処理" onclick="proc();" /><br />
  <hr/>
  結果<br />
  <input id="Text4" type="text" size="40" /><br />
</body>
</html>

replaceメソッドの flag引数に "g" を与える

第三引数に"g"を与えます。ただし、この方法はブラウザ依存があるため、おすすめはできません。

  function proc() {
    var input = document.getElementById("Text1").value;
    var pat = document.getElementById("Text2").value;
    var rep = document.getElementById("Text3").value;

    var result = input.replace(pat, rep, "g");

    document.getElementById("Text4").value = result;
  }