【发布时间】：2014-04-14 06:33:24
【问题描述】：
我正在开发一个节点脚本，它使用正则表达式来解析 CSS 文件，它运行良好……除了处理 @media 查询时。问题是由于嵌套的花括号让我很适合。我基本上想在媒体查询中创建一个包含所有内容的捕获组：这就是我到目前为止所得到的。
@media[^{]+\{([^}]+)}\s*}
这适用于简单的事情，例如：
@media (max-width: 868px) {
aside .size-toggle {
display: none;
}
}
但是不能拾取多个嵌套规则，像这样：
@media (max-width: 767px) {
#wrapper.sidebar-display aside {
left: 0;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
#wrapper.sidebar-display #top-nav {
left: 0;
right: -194px;
}
}
我需要如何修改我的正则表达式，以便捕获组包含每个单独的 @media 查询中的所有选择器和规则？
【问题讨论】：
-
您使用什么语言/平台？
-
这听起来很危险。您的解析器如何处理 Internet Explorer 特定的图像过滤器？它们有非常不同的模式，这在 CSS 中很常见，可能很容易破坏解析器。
-
它是在节点上运行的 javascript。据我所知，它可以很好地处理 IE 特定的废话。该代码使用
([^@{}]+)}来捕获每个选择器的全部内容，然后根据:将每个规则分解为本质上的键/值对。它是双 { 导致它在媒体查询的情况下崩溃，这是我需要帮助的。我的计划是捕获媒体查询的全部内容，然后通过脚本的常规部分运行该内容，本质上将其视为一个自包含的 CSS 文件。 -
看这个相关问题stackoverflow.com/questions/14145620/… 答案是用PHP写的，但是应该很容易移植到JS。
-
您的问题缺乏您想要达到的目标的上下文，但通常使用正则表达式编写自己的“解析器”是个坏主意。你应该改用一些成熟的模块，比如css-parse。
标签： javascript css regex node.js