捕捉样式标签内部内容

Catch style tag inner content

提问人：WP-Silver 提问时间：6/16/2022 最后编辑：Andy LesterWP-Silver 更新时间：6/16/2022 访问量：358

问：

我使用以下正则表达式来捕获所有样式 HTML 标签和内部内容：

<style[^>]*>([^<]+)?<[\s\/]+style>

这很好用，它会捕获所有内容，直到结束样式标签，但如果标签内容包含其他标签（例如.svg，路径）则失败 请参阅此示例 https://regex101.com/r/kEyFED/1

如何避免这种情况并捕捉此类内容？

正则表达式 HTML 解析

评论

0赞 derpirscher 6/16/2022
好吧，您明确地说这翻译为“除”之外的所有字符“......([^<]+)<
0赞 WP-Silver 6/16/2022
@derpirscher当然是这样，我正在努力弄清楚如何改变它。
1赞 Barmar 6/16/2022
这就是为什么你不应该使用正则表达式来解析 HTML，而应该使用 DOM 解析器。您可以使用它来防止跨多个标签进行匹配，但正因为如此，您不能有任何嵌套标签。<style>
0赞 WP-Silver 6/16/2022
@Barmar 我完全意识到这一点，但不能为此使用 DOM 解析器。
0赞 derpirscher 6/16/2022
你可以使用一个懒惰的量词 它将匹配下一个(.+?)</style>

答：

3赞 cyberbrain 6/16/2022 #1

我建议

<style[\w="'\s-]*>(.*?)<\/\s*style>

这应该与样式标签匹配，并将其内部内容放入组 1 中。它匹配 和 之间的最少字符数。转义取决于您使用的语言。<style></style>/

更新：我更新了我的正则表达式以匹配元素中的属性。这些元素没有经过任何形式的验证，这些东西只是为了使样式标签匹配。如果包含在属性值中，则仍然无法正确匹配。>

更新 2：结束标签现在允许在 和 之间留空格。</style>

评论

0赞 Chris Maurer 6/16/2022
嵌套的 <style> 标签出现问题 - 外部 <style> 与内部 </style 匹配>
0赞 derpirscher 6/16/2022
@ChrisMaurer 好吧，如果你想用正则表达式解析嵌套结构，这就是你必须付出的代价......
1赞 cyberbrain 6/16/2022
@ChrisMaurer根据元素的 MDN 引用，有效的 HTML 不能包含任何 HTML 元素，只允许使用 CSS。所以这应该不是一个大问题 - 除非你想写一个 HTML 验证器。<style>

上一个：正则表达式，用于在 HTML 标记的重复模式中创建不同的捕获组

下一个：正则表达式寻找特定的 HTML 标签来标记我正在寻找的字符串的末尾