Javascript 正则表达式匹配 标签与可选属性 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>

这里，width 和 height 和 viewBox 是optionals 并且 viewBox 属性和 svg 内容的值必须是分组。

以下正则表达式适用于 viewBox 是必需属性的情况:

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

请参阅demo

但是当我将 viewBox 设为可选组时，没有匹配的组(注意 ? 括号后的符号):

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

Answer 1

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

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

Demo