如何用单个正则表达式提取含calc的CSS transform值

你遇到的问题是原正则(\w+)\(([^)]*)\)无法处理嵌套括号场景——[^)]*会匹配到第一个)就停止，导致calc里的内容被截断。可以用支持递归匹配的正则一次性完成完整提取，无需额外步骤。

最终正则表达式 #

/(\w+)\((((?:[^()]|\((?2)\))*)\)/

正则解析 #

• (\w+)：捕获transform的函数名（如translateX、translateY）
• \(：匹配函数的左括号
• ((?:[^()]|\((?2)\))*)：核心逻辑，匹配括号内的所有内容（含嵌套括号）：
  • (?:...)：非捕获组，用于组合匹配规则
  • [^()]：匹配任意非括号字符
  • \((?2)\)：递归引用第二个捕获组的规则，处理嵌套的括号结构——遇到左括号时，重复执行括号内的匹配逻辑，直到对应右括号闭合
• \)：匹配函数的最外层右括号

测试验证 #

• 输入translateX(10px)：捕获组1为translateX，捕获组2为10px
• 输入translateY(calc(-50% - 100px))：捕获组1为translateY，捕获组2为calc(-50% - 100px)
• 甚至支持多层嵌套，比如rotate(calc(30deg + (20 * 2)deg))，也能正确提取完整的括号内内容

兼容性说明 #

这个正则依赖ES2018引入的递归正则引用（(?2)语法），现代浏览器、Node.js 10+均支持。如果需要兼容旧环境，可以使用基于括号计数的正向预查方案：

/(\w+)\(([^()]*(?:\((?:[^()]*(?:\([^()]*\)[^()]*)*)\)[^()]*)*)\)/

不过递归版本更简洁易读，优先推荐。

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