用于验证图像 url 的正则表达式，它可能包含 jpeg、jpg、gif、png 等扩展名

Question

Regex to validate image url which may contains extension like jpeg, jpg, gif, png

I'm using

/\.(jpg|jpeg|png|gif|webp)(\?.*)*$/i

but it gives false for https://store.storeimages.cdn-apple.com/4668/as-images.apple.com/is/macbook-air-gallery3-20201110?wid=4000&hei=3072&fmt=jpeg&qlt=80&.v=1603399121000

I'm expecting a regex which can give true if this extensions like jpg, jpeg, png, gif, webp are present in url.

Answer 1

I don't know what you'd like to do exactly but this should return true :

 var text = "https://store.storeimages.cdn-apple.com/4668/as-images.apple.com/is/macbook-air-gallery3-20201110?wid=4000&hei=3072&fmt=jpeg&qlt=80&.v=1603399121000"; const regex = new RegExp(/(\W)(jpg|jpeg|png|gif|webp)(\W)/); console.log(regex.test(text));

Answer 2

You can use this regex to test for URL parameter fmt=<format> :

• first example: fmt=jpeg in middle
• second example: fmt=jpeg at end
• third example: fmt=bmp (unsupported format)

 const regex = /\bfmt=(jpg|jpeg|png|gif|webp)(?=(&|$))/; [ 'https://store.storeimages.cdn-apple.com/4668/as-images.apple.com/is/macbook-air-gallery3-20201110?wid=4000&hei=3072&fmt=jpeg&qlt=80&.v=1603399121000', 'https://store.storeimages.cdn-apple.com/4668/as-images.apple.com/is/macbook-air-gallery3-20201110?wid=4000&hei=3072&qlt=80&.v=1603399121000&fmt=jpeg', 'https://store.storeimages.cdn-apple.com/4668/as-images.apple.com/is/macbook-air-gallery3-20201110?wid=4000&hei=3072&fmt=bmp&qlt=80&.v=1603399121000', ].forEach(url => { console.log(url + ' => ' + regex.test(url)); });

Output:

https://store.storeimages.cdn-apple.com/4668/as-images.apple.com/is/macbook-air-gallery3-20201110?wid=4000&hei=3072&fmt=jpeg&qlt=80&.v=1603399121000 => true
https://store.storeimages.cdn-apple.com/4668/as-images.apple.com/is/macbook-air-gallery3-20201110?wid=4000&hei=3072&qlt=80&.v=1603399121000&fmt=jpeg => true
https://store.storeimages.cdn-apple.com/4668/as-images.apple.com/is/macbook-air-gallery3-20201110?wid=4000&hei=3072&fmt=bmp&qlt=80&.v=1603399121000 => false

Explanation of regex:

• \b -- word boundary
• fmt= -- literal fmt= parameter (this is to avoid false positives)
• (jpg|jpeg|png|gif|webp) -- logical 'or' of supported file extensions
• (?=(&|$)) -- positive lookahead for either & or end of string