Javascript 正则表达式匹配带有可选属性 viewBox 的 <SVG> 标签答案

【问题标题】：Javascript regex matching <SVG> tags with optional attribute viewBoxJavascript 正则表达式匹配带有可选属性 viewBox 的 <SVG> 标签
【发布时间】：2021-06-30 12:44:16
【问题描述】：

我正在尝试将<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>/

【问题讨论】：

如果你不介意另一个组，你可以对没有 viewBox 属性的部分使用替换 <svg\b[^>]*\s*(viewBox="(\b[^"]*)").*?>([\s\S]*?)<\/svg>|<svg>([\s\S]*?)<\/svg> regex101.com/r/CTaCvi/1 在代码中你可以检查组 4 的存在（它是| 之后的额外组）但如果可用，使用解析器获取值可能更容易。
@Thefourthbird，但它不能解决我的问题。我需要一个通用的正则表达式代码。

标签： javascript tags regex-group

【解决方案1】：

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

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

Demo

【讨论】：