正規表現 で 画像 URL の拡張子 .jpeg .jpg .png の後ろに特定の文字列を付与する

拡張子 .jpeg .jpg .png の画像 URL の末尾に .webp を付与する正規表現をご紹介します。

正規表現で拡張子の後ろに文字列を付与するサンプルコード

JavaScript で正規表現で拡張子の後ろに .webp という文字列を付与するサンプルコードは以下のとおりです。

ポイントは ?v=123 のような URL パラメータまでちゃんと考慮しているという点です。

var regExp = /(\.jpeg|\.jpg|\.png)/;
 
var str = "http://example.com/sample.jpeg?v=123";
var newstr = str.replace(regExp, "$1\.webp");
console.log(newstr); // http://example.com/sample.jpeg.webp?v=123
 
var str = "http://example.com/sample.jpg?v=123";
var newstr = str.replace(regExp, "$1\.webp");
console.log(newstr); // http://example.com/sample.jpg.webp?v=123
 
var str = "http://example.com/sample.png?v=123";
var newstr = str.replace(regExp, "$1\.webp");
console.log(newstr); // http://example.com/sample.png.webp?v=123

例えば WebP 対応をする場合は Chrome ブラウザだけ WebP のフォーマットで表示するアプリケーションコードを書く必要があります。そういうケースで、今回ご紹介した正規表現のスニペットが役立つと幸いです。

参考情報