Question

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

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]);
}

CSS3转换字符串上的正则表达式（正则表达式）

2 个答案: