How to extract the webkit transformation syntax in Javascript

Question

Hi all!

I would like to extract the individual elements of a composite webkit transformation in Javascript. For example:

var act_transform = element.style.webkitTransform

gives me:

scale(0.6) translate(0px, 2236px) rotate(12deg)

What is good human readable, but terrible to parse programmatically. I'm interested on all 4 numerical values. (act_scale, act_translate_x, act_translate_y, act_rotate) I tried something with regular expressions but i don't found a effective way.

Any ideas? Many Thanks in advance!

Answer 1

var s = "scale(0.6) translate(0px, 2236px) rotate(12deg)";
s.match(/[^()\s]+(?=,|\))/g);
// -> ["0.6", "0px", "2236px", "12deg"]

The character class makes sure we match anything that's not a bracket or space, while the positive lookahead, (?=,|\)), makes sure that a comma , or closing bracket ) follows our matched expression. This effectively anchors our match to the lookahead match.