正規表現 で 画像 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 のフォーマットで表示するアプリケーションコードを書く必要があります。そういうケースで、今回ご紹介した正規表現のスニペットが役立つと幸いです。