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

Question

使用HTML5 srcset 图像候选字符串的官方规范,我创建了以下正则表达式:

/<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演示.

我究竟做错了什么？

Answer 1

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

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

Debuggex演示

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

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

Debuggex演示