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

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

目次

replaceメソッド

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

文字列を置換する

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

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

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

</script>

4行目は、replaceメソッドで文字列を置換しています。

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

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

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

const p1 = /[うか]/;
console.log(str1.replace(p1,"かき"));//あいかきえお

</script>

4行目は、正規表現で「う」or「か」を指定しています。
5行目は、「う」が該当するので「う」の箇所が「かき」に置換されます。

文字をORで検索し置換する+2文字が該当(正規表現)

文字をORで検索し置換する+2文字が該当する場合のサンプルです。

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

const p1 = /[うえ]/;
const r1 = str1.replace(p1,"かき");
console.log(r1); // あいかきえお

</script>

4行目は、正規表現で「う」or「え」を指定しています。
5行目は、まず「う」が該当するので置換されます。正規表現の[うえ]はどちらか1文字という意味なので「え」は置換えされません。

文字をORで検索し置換する+2文字が該当+gオプション(正規表現)

文字をORで検索し置換する+2文字が該当+gオプションの場合のサンプルです。

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

const p1 = /[うえ]/g;
console.log(str1.replace(p1,"かき"));// あいかきかきお

</script>

4行目は、正規表現で「う」or「え」を指定+マッチしたものをすべて返すgオプションを指定しています。
5行目は、「う」が該当するので置換され「え」も該当するので置換されます。

正規表現の構文

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

プログラムでつまったらteratailに登録して質問しましょう!↓↓↓

△上に戻る