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

JavaScriptのreplaceメソッドで、文字列を置換するサンプルです。

目次

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

replaceとは

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

文字列を置き換える

<script>
  const str1 = "あいうーあいう";

  // 2つめの引数が1文字
  console.log(str1.replace("あ", "A")); // Aいうーあいう
  console.log(str1.replace("あい", "A")); // Aうーあいう

  // 2つめの引数が複数文字
  console.log(str1.replace("あ", "AB")); // ABいうーあいう
  console.log(str1.replace("あい", "AB")); // ABうーあいう

  //正規表現で一致した箇所をすべて置換
  console.log(str1.replace(/あ/g, "A")); // AいうーAいう
</script>

最初に一致した箇所のみ置き換えます。
一致した箇所すべて置き換える場合は正規表現を使用します。
gは正規表現のオプションでマッチしたものを全て返します。

 

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

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

<script>
  // 指定の文字(う)を削除する
  const str1 = "あいうえお";
  console.log(str1.replace("う", "")); //あいえお

  // 半角空白を削除する(△あ△い△う△ +1△△)
  const str2 = " あ い う +1  ";
  console.log(str2.replace(/\s/g, "")); //あいう+1
  console.log(str2.replace(/\s/g, "").length); //5
</script>

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

 

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

<script>
  const str1 = "あいうーあいう";
  const reg1 = /[あう]/g;
  console.log(str1.replace(reg1, "a")); //aいaーaいa

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

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

  const str4 = "--1234512345--"; //2回マッチする
  const reg4 = /[0-9]{5}/g;
  console.log(str4.replace(reg4, "*****")); //--**********--

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

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

 

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

 

正規表現のオプション

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

関連の記事

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

△上に戻る