如何用正则匹配CSS中仅含--前缀变量的var()函数及闭合括号

问题根因 #

你之前的正则使用非贪婪匹配.*?，当var()内部后续没有--前缀变量时，匹配到逗号就会终止，不会继续查找闭合的右括号，导致匹配结果缺失末尾的)。

实现方案 #

推荐分两步处理，逻辑清晰兼容性好：

1. 匹配完整var()函数 #

先用正则匹配出所有完整的、带闭合括号的var()片段：

var\([^)]*\)

逻辑说明：[^)]*会匹配除了右括号之外的所有字符，直到遇到第一个右括号停止，完美匹配var()的闭合结构，不会越界。

2. 过滤内部参数，仅保留--前缀变量 #

对每一个匹配到的var()片段，提取内部所有--开头的CSS变量，重新拼接成你需要的格式即可，示例JS代码如下：

const testStr = '#ffff var(--button-border-width, 1px, 44, --test) ff var(--button-border-style, solid, 45) var(solid, --button-border-style, ad) #gggg 12345 (...not enclude)';
// 匹配所有完整var()
const fullVarRegex = /var\([^)]*\)/g;
const res = testStr.match(fullVarRegex).map(item => {
  // 提取所有--开头的变量
  const cssVars = item.match(/--[\w-]+/g) || [];
  // 单个变量后需要保留逗号的话调整为`var(${cssVars.join(', ')}${cssVars.length < 2 ? ',' : ''})`
  return `var(${cssVars.join(', ')})`;
});

// 输出结果：
// ["var(--button-border-width, --test)", "var(--button-border-style)", "var(--button-border-style)"]

单步正则实现（需要支持可变长度后向断言的引擎） #

如果你需要单步正则直接匹配目标结果，可以使用以下表达式：

var\((?:[^)]*?(--[\w-]+)[^)]*?)*\)

匹配到结果后直接提取分组1的所有变量拼接即可。

内容的提问来源于stack exchange，提问作者Vitalii T