JavaScriptの正規表現におけるreplaceメソッドのコールバック
replaceメソッドの第2パラメータは、文字列だけでなく、 コールバック関数も受け取ることができます。 この関数は、見つかった各マッチに対して適用されます。 正規表現が発見した各部分文字列は、その部分文字列に対してこの関数が返すものに置き換えられます。
この関数にはパラメータを渡すことができます: 第1パラメータには見つかった文字列が入り、 第2パラメータには最初のキャプチャグループ、 第3パラメータには2番目のキャプチャグループが入ります。このように、 正規表現内のキャプチャグループの数だけパラメータを設定できます。
最後から2番目のパラメータには見つかったマッチの位置が入り、 最後のパラメータには検索対象の文字列全体が入ります。
これらがどのように機能するか、実践的な例を通して見ていきましょう。
例
数値が含まれる文字列があるとします:
let str = '2 3 4 5';
これらの数値を2乗に置き換えてみましょう。 まず、コールバック関数内で数値を一つずつコンソールに出力してみます:
str.replace(/\d+/g, function(match) {
console.log(match);
});
このコードは、最初に'2'、次に
'3'、'4'、そして'5'を出力します。
つまり、変数matchには、正規表現が見つけた文字列が順番に入ります。
タスクを最後まで解決しましょう -
matchを2乗し、returnで返します。
見つかった数字2に対して4が返され、2がこの4に置き換わります。
見つかった数字3に対して9が返され、3がこの9に置き換わります。
同様に他の数値も処理されます:
let result = str.replace(/\d+/g, function (match) {
return match**2;
});
console.log(result); // '4 9 16 25'を出力します
例
今度は、'2+3='のような形式の構文が文字列に含まれているとします:
let str = '2+3= 4+5= 6+7=';
等号の後に、対応する数値の合計が挿入されるようにしてみましょう。 つまり、元の文字列を次のように変換します:
'2+3=5 4+5=9 6+7=13'
このタスクを解決するために、再度実験してみましょう - 第1項と第2項を別々のキャプチャグループに分けます:
str.replace(/(\d+)\+(\d+)=/g, function (match0, match1, match2) {
console.log(match0, match1, match2);
});
では、タスクを完全に解決しましょう:
見つかった各部分文字列について、第1と第2のキャプチャグループを合計し、
第0キャプチャグループ(例えば'2+3='といった見つかった文字列)を取り、
それに結果を加え、全てをreturnで返します:
let result = str.replace(/(\d+)\+(\d+)=/g, function(match0, match1, match2) {
let sum = Number(match1) + Number(match2);
return match0 + sum;
});
console.log(result);
実践問題
以下の文字列があります:
let str = 'aaa [2] bbb [3] ccc [12] ddd';
角括弧内にある数字を見つけ、それらを2倍に増やしてください。 つまり、元の文字列から次のような文字列が得られるはずです:
'aaa [4] bbb [6] ccc [24] ddd'
以下の文字列があります:
let str = '123 456 789';
全ての数字を見つけ、その桁を逆順に並べ替えてください。 つまり、元の文字列から次のような文字列が得られるはずです:
'321 654 987'
日付が含まれる文字列があります:
let str = '31.12.2025 30.11.2024 29.10.2023';
全ての日付を見つけ、別の形式に変換し、次のような文字列を得てください:
'2025-12-31 2024-11-30 2023-10-29'