JavaScript 文字列を置換するサンプル(replace)

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

目次

サンプル 文字列を置き換える(replace)
  全ての文字を置換する(正規表現)
  文字列の中にある半角空白を取り除く
  指定した文字を削除する
  2つめの引数が関数の場合
  正規表現

文字列を置き換える(replace)

変数 = 置換したい文字列.replace (文字or 正規表現 , 置換後の文字or関数);
  • 1つ目の引数の文字または正規表現にマッチした文字を、2つ目の引数の文字または関数の結果に置換えます。
  • 戻り値は新しい文字列を返します。元の文字列には影響ありません。
  • Stringオブジェクトのメソッドです。

文字列を置き換えるサンプルです。

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

  console.log(str1.replace(/[いう]/, "B")); //あBうーあいう

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

4行目は、1つ目の引数「あ」に合致する最初の文字を2つ目の引数「A」に置き換えます。
6行目は、1つ目の引数が正規表現です。[いう]は、「い」または「う」を意味します。
8行目は、1つ目の引数が文字列です。

 

全ての文字を置換する(正規表現)

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

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

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

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

4行目の/あ/gは正規表現です。gは正規表現のオプションでマッチしたものを全て返します。
6行目の[あう]は、「あ」または「う」を意味する正規表現です。
8行目は、replaceAllメソッドで置換しています。ただしIEは対応していません。

 

文字列の中にある半角空白を取り除く

<script>
  // 半角空白あり(△あ△い△う△ +1△△)
  const str1 = " あ い う +1  ";

  console.log(str1.replace(/\s/g, "")); //あいう+1
</script>

文字列の中にある半角空白を取り除くには、
1つ目の引数を半角空白(正規表現)にして、2つ目の引数を空文字にします。
\sは、半角空白を表します。

 

指定した文字を削除する

<script>
  const str1 = "あいうえお";

  console.log(str1.replace("う", "")); //あいえお
</script>

指定した文字を削除するには、
1つ目の引数に削除する文字を指定して、2つ目の引数に空文字を指定します。

 

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

正規表現

正規表現の構文として以下2つがあります。

変数 = /正規表現のパターン/オプション
変数 = new RegExp('正規表現のパターン','オプション') 

正規表現の主なパターン

パターン パターンの意味
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メソッド)

△上に戻る