[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

正規表現のパターン

パターン パターンの意味
ABD ABDという文字か。
[ABD] A or B or Dのどれか1文字が入っているか。
[^ABD] A と B と D以外の1文字が入っているか。
[A-D] A or B or C or Dのどれか1文字が入っているか。
A|B|D A or B or Dのどれか1文字が入っているか。
[a-zA-Z] 英字の小文字のaからzまたは大文字のAからZのどれか1文字が入っているか。
^A 先頭の文字はAか。
A$ 最後尾の文字はAか。
* *の直前の文字が0回以上の繰り返し。
+ +の直前の文字が1回以上の繰り返し。
? ?の直前の文字が0回または1回の繰り返し。
{n} n回続いている。
{n,} n回以上続いている。
 . 任意の一文字を表す。
¥s 比較する文字に、空白1文字がある。
¥S 比較する文字に、空白以外の1文字がある。
¥d 比較する文字に、数字1文字がある。 ([0-9]と同じ)
¥D 比較する文字に、数字以外の1文字がある。  ([^0-9]と同じ)
¥w 比較する文字に、小文字の英字 or 大文字の英字 or 数値 or アンダースコアの1文字がある。
[a-zA-Z0-9_]と同じ
¥W ¥wの否定。
[^¥w]と同じ

正規表現のオプション

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

関連の記事

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

△上に戻る