Javascriptで末尾から特定の文字列を検索し置換する:メモ

目新しい内容ではなく個人的な忘備録用です。よくよく考えると動作する理由がわからなくなり、根本的な部分がどうだったんだろうと。かなり初心者な内容です。

前提

• Javascriptのreplaceで正規表現を使い、後ろから検索対象文字列を検索し、最初に見つかった検索対象文字列を置換する

文字で書くと少々ややこしいですが、以下のような動作を目的としています。

https://example.com.co.jp.xyz/images/example.jpg
↓以下のように置換したい
https://example.com.co.jp.xyz/images/example_w500.jpg

サンプル

const str = 'https://example.com.co.jp.xyz/images/example.jpg';
str.replace(/(.*)\./, "$1_w500.");
//https://example.com.co.jp.xyz/images/example_w500.jpg

上記で実現できるわけですが、なぜ最初のhttps://exampleがキャプチャされずに末尾から検索してキャプチャされるのだろうと。

答えは単純で(.*)が貪欲マッチとなり、途中で.があっても一旦最後まで文字列を検索を実行し、末尾に到着後に戻ってから最初の.で止まるからですね。

結び

最短マッチで記述していることばかりだからか(.*?)という記述と動作しか頭になく、?を抜いた(.*)で「貪欲マッチだからこの動作になる」ということがすっぽり抜けて無意味に悩んでしまいました。