regex - 如何从 srcset 属性中提取图像集?

标签 regex html image set

使用 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 .

我做错了什么?

最佳答案

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

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

Regular expression visualization

Debuggex Demo

正则表达式不能返回相同捕获组的多个实例。您需要做的是捕获整个文件,然后进一步检查以获取各个文件名:

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

Regular expression visualization

Debuggex Demo

关于regex - 如何从 srcset 属性中提取图像集?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26466724/

相关文章:

php - PHP 中 preg_replace 的正则表达式

html - 在占位符中的元素之间添加空间

html - 在 asp.net mvc 中滚动没有滚动条的 Div?

iphone - 是否可以打印屏幕或将屏幕的某些部分保存在图像中?

android - 如何在Android中没有Intent且没有任何 View 窗口的情况下拍照

php - 从更新的命令行输出中获取百分比 - Regex 和 PHP

javascript - 替换子字符串,但如果在标签之间或在带有 javascript 的标签中则不替换

regex - 将 Android 正则表达式移植到 BlackBerry 正则表达式不起作用

javascript - 在 Chrome Android 中获取 BLOB

c# - 旋转图像并查看下一页