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' ]

正则表达式使用两个捕获组，第一个 matches/captures 个单词字符，第二个使用否定匹配除 ) "zero or more" 次之外的任何字符。

Answer 2

试试 (\w+)\((.+?)\):

(\w+)：匹配下面的正则表达式并将其匹配捕获到反向引用编号1
- \w+：匹配单个字符，即“单词字符”（字母、数字和下划线）
  - +：1次到无限次之间，尽可能多，按需回馈（贪心）
\(：按字面意思匹配字符“(”
(.+?)：匹配下面的正则表达式并将其匹配捕获到反向引用编号2
- .+?：匹配任何不是换行符的单个字符
  - +?：介于1次和无限次之间，次数越少越好，按需扩充（偷懒）
\)：按字面意思匹配字符“)”

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 上的正则表达式 (Regex) 转换字符串

Regular Expression (Regex) on CSS3 Transform String

javascript

regex

css

replace

webkit-transform