Javascript Regex 提取 SrcSet 属性字符串中的 Url 和维度

Question

此问题的目标是从srcset html 属性字符串中提取 URL 和维度。这里具体参数如下：

• 网址以http 或https 开头
• 网址可能包含,
• 网址不能包含空格
• 维度包含数字，后跟x 或w。不过，可能甚至不需要遵循其中任何一个。

因此，所需的匹配方法是找到 http/https 并匹配到一个空格，然后匹配数字，紧接着是 w 或 x，然后是逗号。后面的空格表示比赛结束。

这通常看起来像 https://url.com 650w 或 https://url.com 650 或 https://url.com 650x。这里没有严格的标准。

这是我尝试使用Regex101 demo here 的正则表达式。这里的问题是它没有正确分组：

(https?:\/\/(?:.*(?:\s+\d+[wx])(?:,\s*)?)+)

要解析的示例字符串：

http://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 640w, http://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 750w, https://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 828, https://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 1080x, https://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 1200w, https://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 1920w, https://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 2048w, https://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 3840w,https://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 3840w, https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=100&q=60 100w, https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=200&q=60 200w, https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=300&q=60 300w, https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=400&q=60 400w, https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60 500w, https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=600&q=60 600w, https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=700&q=60 700w

这样的结果应该是：

http://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 640w
http://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 750w
https://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 828
https://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 1080x
https://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 1200w
https://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 1920w
https://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 2048w
https://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 3840w
https://media.endclothing.com/media/f_auto,w_600,h_600/prodmedia/media/catalog/product/0/4/04-12-2021_LL_212ATDT-CP02S-OD_1_1.jpg 3840w
https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=100&q=60 100w
https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=200&q=60 200w
https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=300&q=60 300w
https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=400&q=60 400w
https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60 500w
https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=600&q=60 600w
https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=700&q=60 700w

Answer 1

对于问题中的 4 点，并获得示例字符串的结果，您可以使用：

https?:\/\/\S* \d+[xw]?(?=,|$)

模式匹配：

• https?:\/\/ 匹配http和https的协议
• \S* 匹配可选的非空白字符（可以包含逗号），然后是空格
• \d+[xw]? 匹配 1+ 位和可选的 x 或 w
• (?=,|$) 正向前瞻，断言 , 或右侧字符串的结尾

Regex demo