解析.scss函数主体的正则表达式(通过JS的SCSS解析器)

时间:2018-10-28 09:40:03

标签: javascript node.js regex

https://regex101.com/r/KCORmT/2

正则表达式

这不是PCRE

@function[^(]*\([\s\S]*?^}$

测试

有效

@function color ($color: #f00) {
  @if 1 + 1 == 2 {
    $color: rgb(0, 0, 255);
  }

  @return $color;
}

它不起作用

@function color($color:#f00){@if 1+1==2 {$color:rgb(0,0,255);} @return $color;}

问题

我必须将功能从 @function 解析为最后一个花括号。此^}$将在新行上解析},但这在下面的示例中无效( ,并且示例中可以没有新行 ) 。有没有技巧可以解析没有嵌套花括号的函数体?

@function color ($color: #f00) {
  @if 1 + 1 == 2 {
    $color: rgb(0, 0, 255);
}

  @return $color;
}

编辑说明: 里面可能有成对的花括号,所以我们可以过滤所有嵌套的成对的花括号吗?

1 个答案:

答案 0 :(得分:0)

如果嵌套级别的数量受到限制,则可以完成。例如,这处理4个嵌套级别。但是如果有包含{}的注释,它将失败。

@function[^{}]*(?:{[^{}]*(?:[^{}]*{[^{}]*(?:[^{}]*{[^{}]*(?:[^{}]*{[^{}]*})*[^{}]*})*[^{}]*})*[^{}]*})*

您可以通过在开头(?:{[^{}]*和结尾(?:{[^{}]*的开头添加[^{}]*})*来增加级别数。

通过匹配内部{...}对和(?:{[^{}]*})*之间没有大括号的方式工作。然后,通过任意多次添加“头”和“尾”,可以增加级别数。每个级别都是可选的,这要归功于用*进行分组,这也使其可重复。最终,“您的” @function比赛会被添加。

See it here at regex101

修改
对不起,有点混乱了。编辑以处理每个级别中的多次重复。