正規表現にマッチした文字列を新しい文字列に置換する(String.prototype.replace)

String オブジェクトのインスタンスメソッドである replace は、文字列の中の指定した文字列を別の文字列に置換し新しい文字列として返しますが、置換を行う文字列を正規表現のパターンを使って指定することもできます。この時グローバルオプションを設定することでまとめて置換を行うこともできます。ここでは String オブジェクトの replace メソッドで置換を行う文字列を正規表現パターンを使って指定する方法について解説します。

※ replace メソッドの基本的な使い方については「文字列を置換する(replace)」を参照されてください。

(Last modified: 2023年02月03日)

置換の対象を正規表現を使って指定する

String オブジェクトの replace メソッドは、対象の文字列の中の指定した文字列を、別の文字列で置換した新しい文字列を返します。書式は次のとおりです。

文字列.replace(置換する文字列, 新しい文字列)

引数の置換する文字列には固定の文字列を指定することもできますが、正規表現オブジェクトを指定することもできます。

文字列.replace(正規表現, 新しい文字列)

対象の文字列の中で 1 番目で指定した正規表現にマッチした文字列を 2 番目で指定した文字列に置換します。対象の文字列に変更は行わず、置換したあとの新しい文字列が返されます。

正規表現にグローバルフラグが設定されていない場合には、対象の文字列の中の最初に正規表現にマッチした文字列だけが置換されます。正規表現にグローバルフラグが設定されていた場合はマッチしたすべての文字列が置換されます。

次のサンプルをみてください。

let str = 'Border Color is Red, Line Color is RED';
let newstr = str.replace(/(Red|RED)/, 'red');

console.log(newstr);
>> Border Color is red, Line Color is RED

対象の文字列の中に Red または RED が含まれていた場合は red に置換します。今回のサンプルのように正規表現オブジェクトにグローバルフラグ設定されていない場合は最初にマッチした文字列だけを置換します。

今度はグローバルフラグが設定されている場合のサンプルです。

let str = 'Border Color is Red, Line Color is RED';
let newstr = str.replace(/(Red|RED)/g, 'red');

console.log(newstr);
>> Border Color is red, Line Color is red

今回はグローバルフラグが設定されているため、対象の文字列の中で正規表現にマッチするすべての文字列が置換されました。

キャプチャグループにマッチした文字列を参照する

replace メソッドでは置換する新しい文字列としてドル記号($)を使った特別な値を記述することができます。

$&  マッチした部分文字列
$`  マッチした部分の前の文字列
$'  マッチした部分の後の文字列
$$  $の文字

上記に加えて、置換する対象の文字列として正規表現を指定した場合に、正規表現の中でキャプチャグループが含まれている場合は $1, $2, ... を使用することでキャプチャグループでキャプチャされた文字列を参照することができます。

$1, $2, ...  キャプチャグループでキャプチャされた文字列

次のサンプルをみてください。

let str = '誕生日は 1994-04-21 です';
let regexp = /(\d{4})-(\d{2})-(\d{2})/;
let newstr = str.replace(regexp, '$1年$2月$3日');

console.log(newstr);
>> 誕生日は 1994年04月21日 です

今回のサンプルでは正規表現パターンに 3 つのキャプチャグループが含まれます。置換する新しい文字列の中で $1 $2 $3 を使ってキャプチャグループでキャプチャした文字列を参照し置換する新しい文字列を指定しています。

置換する新しい文字列として関数を指定する

replace メソッドの 2 番目の引数には置換する新しい文字列を指定しますが、文字列の代わりにコールバック関数を指定することもできます。関数を指定した場合は、 1 番目の引数に指定した文字列または正規表現がマッチした時点で関数が呼び出され、関数からの戻り値が新しい値として置換を行います。

文字列.replace(正規表現, 関数)

関数は呼び出される時に最大で次の引数を受け取ります。必要な数の引数を受け取り、関数のブロック内で置換する文字列を return 文を使って返してください。

match     パターンにマッチした文字列
c1,c2,... パターンにキャプチャグループが含まれる場合にキャプチャした文字列
offset    マッチした文字列の先頭文字のインデックス
str       対象の文字列

次のサンプルをみてください。

let str = 'Border Color is GREEN, Line Color is RED';
let newstr = str.replace(/[A-Z].+?\b/g, function(match){
  return match.toLowerCase();
});

console.log(newstr);
>> border color is green, line color is red

今回のサンプルでは大文字から始まる単語にマッチする正規表現パターンを指定して置換を行います。置換する新しい文字列は、コールバック関数内でマッチした文字列をすべて小文字に変換した文字列を return 文で返しています。グローバルフラグを設定しているので、対象の文字列の中で正規表現にマッチするすべての文字列が置換されます。

-- --

String オブジェクトの replace メソッドで置換を行う文字列を正規表現パターンを使って指定する方法について解説しました。

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。