如何从srcset属性中提取图像集？

Question

使用HTML5 srcset image candidate string的官方规范，我创建了以下正则表达式：

/<img[^\>]*[^\>\S]+srcset=['"](?:([^"'\s,]+)\s*(?:\s+\d+[wx])(?:,\s*)?)+["']/gm

...哪个匹配以下标记：

<img srcset="image@2x.png 2x, image@4x.png 4x, image@6x.png 6x">

...并返回指定的三个文件名（image@2x.png，image@4x.png，image@6x.png）。

然而，即使它匹配，它也只返回最后一个。请参阅此Regex101 demo。

我做错了什么？

Answer 1

正如您在此可视化中所看到的，捕获组括号位于重复模式内。这导致正则表达式只返回最后一个。

<img[^\>]*[^\>\S]+srcset=['"](?:([^"'\s,]+)\s*(?:\s+\d+[wx])(?:,\s*)?)+["']

Debuggex Demo

正则表达式无法返回相同捕获组的多个实例。您需要做的是捕获整个事物，然后进一步检查以获取单个文件名：

<img[^\>]*[^\>\S]+srcset=['"]((?:[^"'\s,]+\s*(?:\s+\d+[wx])(?:,\s*)?)+)["']

Debuggex Demo