图像的正则表达式匹配 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
• ) : 结束捕获组