圖像的正則表達式匹配 url

Question

我想匹配以“//”開頭並以“.jpg”或“.png”或“gif”結尾的圖像 url。 所以我做了以下正則表達式並且它有效但不是所有情況..

var pattern = /\/{2}.+?\.(jpg|png|gif)/gm;

問題是，它也匹配看起來像這樣的東西，

// pm.pstatic.net/dist/css/nmain.20201119.css"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://s.pstatic.net/靜態/www/u/2014/0328/mma_204243574.png

這不是我想要的。 我需要匹配最后一次出現的“//”和“.png”或“.jpg”或“gif”的惰性匹配。 在這種情況下，它將是//s.pstatic.net/static/www/u/2014/0328/mma_204243574.png

我應該用什么來解決這個問題？

+編輯

我要抓取的網站包含圖像 url，看起來像這樣。

<a href="javascript:;" style="背景:url(//gd4.alicdn.com/imgextra/i4/2748816012/O1CN01gbXzeB1uHXhQ9eTVd_..2748816012.jpg_30x30.jpg)

所以普通圖像 url 匹配器不起作用。

此外，它必須是“.jpg”的惰性匹配，因為正如您在上面看到的 url，它的圖像地址類似於//gd4.alicdn.com/imgextra/i4/2748816012/O1CN01gbXzeB1uHXhQ9eTVd_..2748816012.jpg_30x30.jpg

它需要在第一次出現“.jpg”時結束，否則我只會抓取我不想要的 30x30 小圖像。 在這種情況下，我想要的 img url 是//gd4.alicdn.com/imgextra/i4/2748816012/O1CN01gbXzeB1uHXhQ9eTVd_.!2748816012.jpg

Answer 1

您可以嘗試以下正則表達式：

(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|gif|png)

此外，您可以在此處測試您的正則表達式：

https://regex101.com/r/l2Zt7S/1

只是為了好玩，這里有一個匹配所有類型圖像 url 的正則表達式：

^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+(?:png|jpg|jpeg|gif|svg)+$

令我感興趣的是如何 select 最后出現的“//”。 但是讓我們看看是否有人提出了解決該問題的方法。

這是我使用您共享的 URL 測試我的正則表達式時得到的匹配項。

Answer 2

你可以試試這個正則表達式：

/\/\/(\S+?(?:jpe?g|png|gif))/ig

正則表達式演示

正則表達式詳細信息：

• \/\/ ：匹配//
• ( : 開始捕獲組#1
• \S+? : 匹配 1+ 個非空格（惰性）
• (?:jpe?g|png|gif) ：匹配jpg 、 jpeg 、 png或gif
• ) : 結束捕獲組