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/

相关文章:

javascript - 组件内的 Angular2 Html

python - 将原始图像与可能不需要原始图像的编辑图像进行比较的另一种方法

html - 在事件菜单项下居中的 CSS 箭头图像不显示

php - 在 ubuntu 12.10 的 htdocs 中看不到图像?

c# - .NET 正则表达式

html - 用于查找不在超链接内的 URL 的正则表达式

javascript - 有没有办法排除规则而不影响我的 jQuery?

javascript - 如何从具有 jquery 设置值的文本字段中获取 defaultValue

javascript - 解析 AT 命令的正则表达式

css - 修复 Sass/SCSS 括号缩进