javascriptregexcssreplacewebkit-transform

Regular Expression (Regex) on CSS3 Transform String

Given a string "translateX(-50%) scale(1.2)" with N transform functions

1) How can I match the names ["translateX", "scale"]?

2) How can I match the values ["-50%", "1.2"]?

Solution

  • If you absolutely must use regular expression to do this, you can use the exec() method in a loop, pushing the match result of the captured group(s) to the desired arrays of choice.

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

    The regular expression uses two capture groups, the first matches/captures word characters only, the second uses negation which will match any character except ) "zero or more" times.