使用正则表达式解析 css 背景 url 和选择器答案

【问题标题】：Parsing css background url and selector using regex使用正则表达式解析 css 背景 url 和选择器
【发布时间】：2020-07-08 18:58:43
【问题描述】：

我正在尝试更改具有内联样式的 HTML 页面，我想制作一个捕获背景 url 和选择器的正则表达式，例如：

<div>some html here</div>
<style>#some-selector {
  padding-top: 408px;
}
#some-selector .bg {
  background-image: url(www.some-url.com/some-image.jpg);
}
#some-selector {
  background-position: 43% 97%;
}

这里我要捕捉的是#some-selector .bg和www.some-url.com/some-image.jpg，记住HTML页面很大，表达要快

我想出了这个表达式 <style[\s\S]*?[>}\/\n](.*){[\s\S]*?background.*?url\((.*?)\) 但它不能正常工作，我知道我的第一个 [\s\S] 应该是贪婪的，但是当我删除 ? 它会导致灾难性的回溯 <style[\s\S]*[>}\/\n](.*){[\s\S]*?background.*?url\((.*?)\) 它确实有效小字符串，但在整个页面上会导致灾难性的回溯，我使用 regex101 对其进行测试。

感谢任何帮助

编辑：这是一个例子https://regex101.com/r/ZMxOSz/1

【问题讨论】：

您使用的是哪种工具或语言？用正则表达式解析 CSS 不是一个好主意；所以;你应该使用 CSS 解析器。
我正在使用 PHP，我认为提取 CSS 并解析它会比使用正则表达式花费更多的时间，在这种情况下，每个毫秒都很重要
Nooo...解析器始终是最佳选择，因为如果 css 文件是动态的，正则表达式可能会适得其反。请阅读 this 了解为什么这是一个坏主意。

标签： regex regex-greedy

【解决方案1】：

更新
仔细研究后，我提供了 2 个解决方案，可以在一定程度上缓解回溯问题。
在查看它们之前，我想指出只有极少数与 CSS 语法相关的分隔符。
此外，它与定义 CSS 语法的允许字符的顺序和内容更相关。

解决回溯的方法是将正则表达式引擎限制在允许的范围内
角色匹配并具有战略地位。
如果您在此处查看 CSS 规范 -> https://www.w3.org/TR/CSS21/syndata.html
您会注意到它完全由正则表达式定义。
这表明 CSS 解析器完全是用切碎的正则表达式构建的。

但是，虽然将它放入一个有趣的练习
所有包含正则表达式，我会拒绝那个挑战，因为有
对我来说什么都没有。

相反，我会根据您的要求提供这 2 个正则表达式。

第一个：

仅匹配 url() 元素中的第一个 url() 块

<style[^>]*?>(?:[^{}:]*{[^{}]*?:[^{}()]*?})*?(?:([^{}:]*){[^{}]*?:\s*url\s*\(\s*([^{}()]*?)\s*\)\s*})

见->https://regex101.com/r/2SNIks/1

第二个：

将所有url() 块与<style> 元素匹配

(?:<style[^>]*?>|(?!^)\G)(?:(?:(?!</style)[^{}:])*{[^{}]*?:[^{}()]*?})*?(?:([^{}:]*){[^{}]*?:\s*url\s*\(\s*([^{}()]*?)\s*\)\s*})

见->https://regex101.com/r/d8q6LH/1

对于两个正则表达式，

选择器在第 1 组中
网址在第 2 组中

【讨论】：

感谢您的宝贵时间，但是您的正则表达式不适用于现实世界的示例，正如我所说的 hml 页面很大，我添加了开头
是的，我看到了问题所在。添加了一些希望对您更有效的替代方法。
感谢第二个正在工作，真的很想为您的答案投票但没有足够的声誉，我的问题也被否决了:')
我支持你。您所说的“第二个”是指在此页面上吗？
我的意思是你答案中的第二个 expr