javascript - CSS3 转换字符串上的正则表达式 (Regex)

Question

"translateX(-50%) scale(1.2)"给定一个具有 N 个变换函数的字符串

1）如何匹配名称["translateX", "scale"]？

2）如何匹配这些值["-50%", "1.2"]？

Answer 1

如果您绝对必须使用正则表达式来执行此操作，您可以exec()在循环中使用该方法，将捕获的组的匹配结果推送到所需的选择数组。

var str = 'translateX(-50%) scale(1.2)'
var re  = /(\w+)\(([^)]*)\)/g, 
names = [], vals = [];

while (m = re.exec(str)) {
  names.push(m[1]), vals.push(m[2]);
}

console.log(names) //=> [ 'translateX', 'scale' ] 
console.log(vals)  //=> [ '-50%', '1.2' ]

正则表达式使用两个捕获组，第一个仅匹配/捕获单词字符，第二个使用否定，它将匹配除)“零或多个”次之外的任何字符。

Answer 2

尝试类似(\w+)\((.+?)\)：

• (\w+): 匹配下面的正则表达式并将其匹配捕获到反向引用编号 1
  • \w+：匹配作为“单词字符”的单个字符（字母、数字和下划线）
    • +：从一次到无限次，尽可能多次，按需回馈（贪婪）
• \(: 匹配字符“(”字面意思
• (.+?)：匹配下面的正则表达式并将其匹配捕获到反向引用编号 2
  • .+?: 匹配任何不是换行符的单个字符
    • +?: 一次到无限次之间，尽可能少，按需扩展（懒惰）
• \): 从字面上匹配字符“)”

var str = "translateX(-50%) scale(1.2)",
    regex = /(\w+)\((.+?)\)/g,
    match, names = [], values = [];
while(match = regex.exec(str)) {
    names.push(match[1]);
    values.push(match[2]);
}