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

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

目次

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

replaceとは

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

文字列を置き換える

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

  console.log(str1.replace("あ", "A")); // Aいうーあいう

  console.log(str1.replace("あい", "A")); // Aうーあいう
  console.log(str1.replace("あ", "AB")); // ABいうーあいう
  console.log(str1.replace("あい", "AB")); // ABうーあいう
</script>

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

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

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

  console.log(str1.replace(/あ/g, "A")); //AいうーAいう
  console.log(str1.replace(/[いう]/, "B")); //あBうーあいう
  console.log(str1.replace(/[あう]/g, "B")); //BいBーBいB
</script>

gは正規表現のオプションでマッチしたものを全て返します。
5行目の[あう]は、「あ」または「う」を意味する正規表現です。

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

<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>

3行目は、1つめの引数の文字を削除しています。
7行目の\sは、半角空白を表します。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 正規表現で値を返す

△上に戻る