replace（String、文字列）

このページでは豊富な例を用いてJavaScript（js）のStringオブジェクト（文字列）のreplaceの使い方を学ぶことができます。

JavaScript（js）のreplaceはStringオブジェクト（文字列）のメソッドの1つです。
第1引数で指定した条件に一致した呼び出し元の文字列を、第2引数で指定した方法で置換し、新たな文字列を返り値として返します。
第1引数には文字列または正規表現を、第2引数には文字列または関数を指定することができます。

呼び出し元の文字列に対しては変更を行わない非破壊的なメソッドです。

TL;DR

基本

const string1 = 'apple,banana,kiwi';
// 第1引数に置き換えたい文字列、第2引数に置き換える文字列を指定する
const replacedString1 = string1.replace(',', '-');
// 最初に条件にマッチしたもののみ置き換えられる
console.log(replacedString1);
==> apple-banana,kiwi
// 呼び出し元の文字列には変更なし
console.log(string1);
==> apple,banana,kiwi



// 正規表現のフラグ'g'を使用することでマッチするものすべてを置換
const replacedString2 = string1.replace(/,/g, '-');
console.log(replacedString2);
==> apple-banana-kiwi



// 正規表現のフラグ'g'を使用しないとreplacedString1と同じ結果
const replacedString3 = string1.replace(/,/, '-');
console.log(replacedString3);
==> apple-banana,kiwi



// tsv形式をcsv形式に変換（\tはタブ文字）
const string2 = 'JavaScript\tPython\tJava';
const replacedString4 = string2.replace(/\t/g, ',');
console.log(replacedString4);
==> JavaScript,Python,Java



const string3 = 'I can do anything you want.';
const replacedString5 = string3.replace('I', 'You');
console.log(replacedString5);
==> You can do anything you want.



// 正規表現のフラグ'i'と'g'を使用することでマッチするものすべて（大文字小文字関係なく）を置換
const string4 = 'python Python Java java';
const replacedString6 = string4.replace(/(python|java)/gi, 'js');
console.log(replacedString6);
==> js js js js

特殊な置換パターンの適用

// 第2引数に'$&'を使用することでマッチした文字列を挿入することができる
const string1 = 'A B C D E F G';
// $&='A'
const replacedString1 = string1.replace('A', '$& inserted');
console.log(replacedString1);
==> A inserted B C D E F G



// 第2引数に'$`'を使用することでマッチした文字列の直前の文字列を挿入することができる
const string2 = 'ABCDEFG';
// $`='AB'
const replacedString2 = string2.replace('C', ' $` ');
console.log(replacedString2);
==> AB AB DEFG



// 第2引数に"$'"を使用することでマッチした文字列の直後の文字列を挿入することができる
const string3 = 'ABCDEFG';
// $'='DEFG'
const replacedString3 = string3.replace('C', " $' ");
console.log(replacedString3);
==> AB DEFG DEFG



// 第1引数が正規表現の場合、第2引数に'$n'（nは数字）を使用することでn番目の丸括弧で一致した文字列を挿入できる
const string4 = 'ABCDEFG';
// $1='A' $2='B' $3='C' $4='D' $5='E' $6='F' $7='G'
const replacedString4 = string4.replace(/(A)(B)(C)(D)(E)(F)(G)/, '$7 $6 $5 $4 $3 $2 $1');
console.log(replacedString4);
==> G F E D C B A

独自の置き換えパターンの適用

// 第2引数に独自の置き換えパターンを定義した関数を指定（関数の返り値が置き換えた文字列となる）
// 第2引数の関数の第1引数は条件にマッチした文字列
const string1 = 'ABCDE';
// match='A'
const replacedString1 = string1.replace('A', (match) => {
  return match.toLowerCase();
});
console.log(replacedString1);
==> aBCDE



// 第2引数の関数の第2引数以降はreplaceの第1引数が正規表現かどうかによって異なる
// 以下のケースではp1 ~ p5で丸括弧でマッチした文字列を取得することができる
const string2 = 'ABCDE';
// p1='A' p2='B' p3='C' p4='D' p5='E'
const replacedString2 = string2.replace(/(A)(B)(C)(D)(E)/, (match, p1, p2, p3, p4, p5) => {
  return `${p5}-${p4}-${p3}-${p2}-${p1}`;
});
console.log(replacedString2);
==> E-D-C-B-A

解説

基本

このセクションではreplaceの第1引数が文字列または正規表現で、第2引数が文字列であるケースを扱います。

Stringオブジェクトのreplaceは第1引数に文字列を取る場合、呼び出し元の文字列から最初に一致した文字列のみ第2引数の文字列に置き換えます。

最初に一致したもののみではなく、一致する複数の文字列を置換したい場合があります。その場合、第1引数に正規表現（RegExpオブジェクト）を使い、正規表現のフラグのg（global）を指定すると複数の文字列を置換することができます。

// 半角スペース区切りの文字列
const string1 = 'js py go java ts';
const replacedString1 = string1.replace(' ', ',');
console.log(replacedString1);
==> js,py go java ts
// 呼び出し元の文字列には変更なし
console.log(string1);
==> js py go java ts



// 正規表現のフラグ'g'を使用することでマッチするものすべてを置換
const replacedString2 = string1.replace(/\s/g, ',');
console.log(replacedString2);
==> js,py,go,java,ts

特殊な置換パターンの適用

replaceは第2引数の文字列の中で特殊な置換パターンを適用することができます。

$$：文字列'$'を置換する文字列の挿入
$&：第1引数で指定した条件にマッチする文字列を置換する文字列に挿入
$`：第1引数で指定した条件にマッチする文字列の直前の文字列を置換する挿入
$'：第1引数で指定した条件にマッチする文字列の直後の文字列を置換する挿入
$n：第1引数がRegExpオブジェクトの場合、n番目の()（丸括弧）にマッチする文字列を置換する文字列に挿入（nは数値）
$<Name>：名前付きキャプチャグループで記憶された文字列を置換する文字列に挿入。名前付きキャプチャグループが有効なブラウザのみのサポートです。

const string1 = '12345';
// $&='3'
const replacedString1 = string1.replace('3', '-$&-');
console.log(replacedString1);
==> 12-3-45



const string2 = '12345';
// $`='12'
const replacedString2 = string2.replace('3', '-$`-');
console.log(replacedString2);
==> 12-12-45



const string3 = '12345';
// $'='45'
const replacedString3 = string3.replace('3', "-$'-");
console.log(replacedString3);
==> 12-45-45



const string4 = '12345';
// $1='1' $2='3' $3='5'
const replacedString4 = string4.replace(/(1)2(3)4(5)/, '$3-$2-$1');
console.log(replacedString4);
==> 5-3-1

独自の置き換えパターンの適用

replaceの第2引数に関数を指定することで、独自の置き換えパターンを適用させることができます。
この場合、第2引数で指定した関数の返り値として置換する文字列を設定します。
第2引数に指定する関数は複数の引数を取り、それぞれ以下の値が代入されます。このページでは簡潔に説明するので、より詳しい情報は関連1次情報を参照してください。

match：filterの第1引数で指定した条件にマッチする文字列
p1, p2, ... , pn：filterの第1引数がRegExpオブジェクトの場合に、n番目の()（丸括弧）にマッチする文字列。 nは数値であり、取りうるpの数は()の個数に依存します。
offset：filterの第1引数で指定した条件にマッチする文字列の、呼び出し元の文字列の中でのオフセット値
string：呼び出し元の文字列
groups：名前付きキャプチャグループで記憶された文字列を保持しているオブジェクトです。キーに指定した名前、バリューに記憶した文字列を保持しています。名前付きキャプチャグループが有効なブラウザのみのサポートです。

const string1 = 'AABBCC';
// match='B'
const replacedString1 = string1.replace(/B/g, (match) => {
  return match.toLowerCase();
});
console.log(replacedString1);
==> AAbbCC



const string2 = '12345';
// p1='1' p2='2' p3='3' p4='4' p5='5'
const replacedString2 = string2.replace(/(1)(2)(3)(4)(5)/, (match, p1, p2, p3, p4, p5) => {
  return `${p5}=${p4}=${p3}=${p2}=${p1}`;
});
console.log(replacedString2);
==> 5=4=3=2=1

1次情報

String.prototype.replace() - MDN web docs

Regular expressions - MDN web docs

Groups and ranges - MDN web docs