JS--マッチした文字列の置換

マッチした文字列の置換

【開発環境】
OS：Win11（64ビット）
VSCode1.72.2、
クロム

【置換の対象を正規表現を使って指定する】
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日 です

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

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 文で返しています。
グローバルフラグを設定しているので、対象の文字列の中で正規表現にマッチするすべての文字列が置換されます。