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

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

確認環境
・Windows 10
・Google Chrome

目次

replaceメソッド

変数 = 置換したい文字列.replace (文字or 正規表現 , 置換後の文字);

文字を置換する

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

<script>

const str1 = "あああーあああ";

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

</script>

5行目は、replaceメソッドで一致した最初の文字を置換しています。

全ての文字を置換する

全ての文字を置換するサンプルです。

<script>

const str1 = "あああーあああ";

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

</script>

5行目は、一致した全ての文字を置換しています。
/あ/gは正規表現です。gは正規表現のオプションでマッチしたものを全て返します。

文字をORで検索し最初に一致した文字を置換する(正規表現)

文字をORで検索し置換するサンプルです。

<script>

const str1 = "あいうーあいう";

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

</script>

5行目の[あう]は、「あ」または「う」を意味する正規表現です。最初に合致した文字のみ置き換えています。

文字をORで検索し全ての文字を置換する(正規表現)

文字をORで検索し全ての文字を置換するサンプルです。

<script>

const str1 = "あいうーあいう";

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

</script>

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

正規表現の構文

正規表現の構文として以下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メソッド)

△上に戻る