2015年8月6日木曜日

CSSのtranslate3dをパースして数字の配列にするには?

CSSのtranslate3dは例えば translate3d(5, -10, 0) のような文字列になっているが、このままでは計算するのに使いにくい。

そこで、これをパースして数字の配列にするにはどうすればいいだろう。例えば、このような正規表現を使うというのはどうでしょう?

/**
 * CSSのtranslate3d文字列を数字の配列に変換して返す
 */
function parseTranslate3d(string) {
  var array = string.replace('translate3d', '').match(/-?[\d\.]+/g);
  for (var i = 0; i < array.length; i++) {
    array[i] = Number(array[i]);
  }
  return array;
}