javascript - Javascript 正则表达式匹配 tags with optional attribute viewBox

Question

我正在尝试将<svg>标签与可选属性viewBox匹配并提取其值。我想匹配以下所有<svg>标签变体：

<svg width="28" height="32" viewBox="0 0 28 32">
<!-- svg content must be grouped -->
</svg>


<svg viewBox="0 0 28 32">
<!-- svg content must be grouped -->
</svg>

<svg width="28" height="32" viewBox="0 0 28 32">
<!-- svg content must be grouped -->
</svg>

<svg>
<!-- svg content must be grouped -->
</svg>

<svg viewBox="0 0 28 32" width="28" height="32">
<!-- svg content must be grouped -->
</svg>

在这里，宽度和高度以及viewBox是可选的，并且 viewBox 属性的值和 svg 内容必须被分组。

如果 viewBox 是必需属性，则以下正则表达式有效：

/<svg\b[^>]*\s*(viewBox=\"(\b[^"]*)\").*?>([\s\S]*?)<\/svg>/

请看演示

但是当我制作viewBox可选组时，没有匹配的组（注意括号后的?符号）：

/<svg\b[^>]*\s*(viewBox=\"(\b[^"]*)\")?.*?>([\s\S]*?)<\/svg>/

标签： javascripttagsregex-group

Answer 1

最后它通过以下正则表达式解决：

<svg\b[^>]*?(?:viewBox=\"(\b[^"]*)\")?>([\s\S]*?)<\/svg>

演示