説明 | replaceとは |
サンプル | 文字列を置き換える |
正規表現で一致した箇所をすべて置換 | |
指定した文字や空白を削除する | |
正規表現 | 正規表現で文字を置き換える |
正規表現のオプション | |
関数 | 2つめの引数が関数の場合 |
replaceとは
置換したい文字列.replace (文字列or 正規表現 , 置換後の文字列or関数); |
- 1つ目の引数の文字列または正規表現にマッチしたものを2つ目の引数の文字列に置換えます。
- 2つ目の引数に関数も指定できます。
- 戻り値は新しい文字列を返します。元の文字列には影響ありません。
文字列を置き換える
function myFunction() {
const str1 = "abc-abc";
// 2つめの引数が1文字
console.log(str1.replace("a", "X")); // Xbc-abc
console.log(str1.replace("ab", "X")); // Xc-abc
// 2つめの引数が複数文字
console.log(str1.replace("a", "XY")); // XYbc-abc
console.log(str1.replace("ab", "XY")); // XYc-abc
}
最初に一致した箇所のみ置き換えます。
一致した箇所すべて置き換える場合は正規表現を使用します。
正規表現で一致した箇所をすべて置換
function myFunction() {
const str1 = "abc-abc";
//正規表現で一致した箇所をすべて置換
console.log(str1.replace(/a/g, "X")); // Xbc-Xbc
}
gは正規表現のオプションでマッチしたものを全てになります。
指定した文字や空白を削除する
replaceの2つめの引数に空文字を指定することで文字の削除に使用できます。
function myFunction() {
// 指定の文字(c)を削除する
const str1 = "abcd";
console.log(str1.replace("c", "")); //abd
// カンマを削除する
const str2 = "17,234";
console.log(str2.replace(",", "")); //17234
// 半角空白を削除する(△a△b△c△ +1△△)
const str3 = " a b c +1 ";
console.log(str3.replace(/\s/g, "")); //abc+1
console.log(str3.replace(/\s/g, "").length); //5
}
\sは、半角空白を表します。gは正規表現のオプションでマッチしたものを全て返します。
正規表現で文字を置き換える
文字をorで指定する
function myFunction() {
const str1 = "abc-abc";
const reg1 = /[ac]/g;
console.log(str1.replace(reg1, "X")); // XbX-XbX
}
3行目は、aまたはcを指定しています。
gは正規表現のオプションでマッチしたものを全て返します。
0から9の5桁を指定
function myFunction() {
const str2 = "--12345--";
const reg2 = /[0-9]{5}/g; //正規表現 0から9の5桁
console.log(str2.replace(reg2, "*****")); //--*****--
}
3行目の[0-9]は0から9までを指定しています。
{5}は5桁です。
0から9の5桁を指定で6桁だったのとき
対象の数値が6桁の場合は以下になります。
function myFunction() {
const str3 = "--123451--"; //数値が6桁
const reg3 = /[0-9]{5}/g;
console.log(str3.replace(reg3, "*****")); //--*****1--
}
対象の箇所が置換されます。
gオプションで全てマッチさせる
function myFunction() {
const str4 = "--1234512345--"; //
const reg4 = /[0-9]{5}/g;
console.log(str4.replace(reg4, "*****")); //--**********--
const str5 = "--1234512345--"; //
const reg5 = /[0-9]{5}/;
console.log(str5.replace(reg5, "*****")); //--*****12345--
}
gは正規表現のオプションでマッチしたものを全てになります。
7行目は、オプションのgが付いていないので最初のマッチのみ置換します。
正規表現のオプション
オプション | 説明 |
---|---|
g | マッチしたものをすべて返す(Global search.) |
i | 大文字と小文字の区別をしない(Case-insensitive search.) |
m | 複数行をマッチする |
2つめの引数が関数の場合
function myFunction() {
const str1 = "ABCDE";
console.log(
str1.replace("C", function (arg) {
return arg.toLowerCase(); // ABcDE
})
);
}
4行目の2つめの引数は関数(function)です。引数argは"C"になります。
5行目のtoLowerCaseは大文字を小文字にします。
関連の記事