JavaScript replace 文字列を置換する(+正規表現)

nas2017/04/02
説明 replaceとは
サンプル 文字列を置き換える
正規表現で一致した箇所をすべて置換
  指定した文字や空白を削除する
正規表現 正規表現で文字を置き換える
  正規表現のオプション
関数 2つめの引数が関数の場合

replaceとは

置換したい文字列.replace (文字列or 正規表現 , 置換後の文字列or関数);
  • １つ目の引数の文字列または正規表現にマッチしたものを２つ目の引数の文字列に置換えます。
  • 2つ目の引数に関数も指定できます。
  • 戻り値は新しい文字列を返します。元の文字列には影響ありません。

 

文字列を置き換える

<script>
  const str1 = "abc-abc";

  // 2つめの引数が1文字
  console.log(str1.replace("a", "X")); // Xbc-abc
  console.log(str1.replace("ab", "X")); // Xc-abc

  // 2つめの引数が複数文字
  console.log(str1.replace("a", "XY")); // XYbc-abc
  console.log(str1.replace("ab", "XY")); // XYc-abc
</script>

最初に一致した箇所のみ置き換えます。
一致した箇所すべて置き換える場合は正規表現を使用します。

 

正規表現で一致した箇所をすべて置換

<script>
  const str1 = "abc-abc";

  //正規表現で一致した箇所をすべて置換
  console.log(str1.replace(/a/g, "X")); // Xbc-Xbc
</script>

gは正規表現のオプションでマッチしたものを全てになります。

 

指定した文字や空白を削除する

replaceの2つめの引数に空文字を指定することで文字の削除に使用できます。

<script>
  // 指定の文字(c)を削除する
  const str1 = "abcd";
  console.log(str1.replace("c", "")); //abd

  // カンマを削除する
  const str2 = "17,234";
  console.log(str2.replace(",", "")); //17234

  // 半角空白を削除する(△a△b△c△ +1△△)
  const str3 = " a b c +1  ";
  console.log(str3.replace(/\s/g, "")); //abc+1
  console.log(str3.replace(/\s/g, "").length); //5
</script>

\sは、半角空白を表します。gは正規表現のオプションでマッチしたものを全て返します。

 

正規表現で文字を置き換える

文字をorで指定する

<script>
  const str1 = "abc-abc";
  const reg1 = /[ac]/g;
  console.log(str1.replace(reg1, "X")); // XbX-XbX
</script>

3行目は、aまたはcを指定しています。
gは正規表現のオプションでマッチしたものを全て返します。

0から9の5桁を指定
<script>
  const str2 = "--12345--";
  const reg2 = /[0-9]{5}/g; //正規表現 0から9の5桁
  console.log(str2.replace(reg2, "*****")); //--*****--
</script>

3行目の[0-9]は0から9までを指定しています。
{5}は5桁です。

0から9の5桁を指定で6桁だったのとき

対象の数値が6桁の場合は以下になります。

<script>
  const str3 = "--123451--"; //数値が6桁
  const reg3 = /[0-9]{5}/g;
  console.log(str3.replace(reg3, "*****")); //--*****1--
</script>

対象の箇所が置換されます。

gオプションで全てマッチさせる

<script>
  const str4 = "--1234512345--"; //
  const reg4 = /[0-9]{5}/g;
  console.log(str4.replace(reg4, "*****")); //--**********--

  const str5 = "--1234512345--"; //
  const reg5 = /[0-9]{5}/;
  console.log(str5.replace(reg5, "*****")); //--*****12345--
</script>

gは正規表現のオプションでマッチしたものを全てになります。
7行目は、オプションのgが付いていないので最初のマッチのみ置換します。

正規表現の一覧表

 

正規表現のオプション

オプション 説明
g マッチしたものをすべて返す(Global search.)
i 大文字と小文字の区別をしない(Case-insensitive search.)
m 複数行をマッチする

 

2つめの引数が関数の場合

<script>
  const str1 = "ABCDE";
  console.log(
    str1.replace("C", function (arg) {
      return arg.toLowerCase(); // ABcDE
    })
  );
</script>

4行目の2つめの引数は関数(function)です。引数argは"C"になります。
5行目のtoLowerCaseは大文字を小文字にします。

以下はMDNのreplaceメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace

関連の記事

JavaScript split 文字列を配列にする(正規表現)
JavaScript match 正規表現で値を返す

△上に戻る