javascript - CSS 'translate(0px, 0px)' 元素样式的正则表达式匹配值

Question

给定一个样式属性字符串，我需要捕获 CSS translate() 属性的 x 和 y 值。数字可以是零、正数或负数、 float 或整数，并且只能以像素为单位。

一个实用的样式属性字符串示例:

min-height: 100%;
min-width: 100%;
transition-property: transform;
transform-origin: 0px 0px;
transform: translate(123px, 0px) translateZ(0px);

我有一个可行的解决方案，虽然非常丑陋。这是一个分割:

var transform = element.style['transform'] - transform 变量然后包含此字符串:"translate(123px, 0px) translateZ(0px) "

然后我将它与:

transform = transform.match(/translate\(-?[0-9]+(\.[0-9]*)?px, -?[0-9]+(\.[0-9]*)?px\)/);

我这样做是为了在有另一个变换属性时，例如 rotate(20px, 20px)，我可以避免它。

正则表达式生成此数组:["translate(123px, 0px)", undefined, undefined]。

然后按顺序使用另一个正则表达式，仅匹配数值:

transform = transform[0].match(/(-?[0-9]+(\.[0-9]*)?)px, (-?[0-9]+(\.[0-9]*)?)px/);

然后我得到以下数组:["123px, 0px", "123", undefined, "0", undefined]

为了完成我需要 parseInt(transform[1]) 和 parseInt(transform[3]) 实际处理这些值的一切。

只获取这两个数字似乎工作量太大，但我对正则表达式不是很有经验，我不知道如何简化它。有没有更优雅的解决方案？

编辑:我特别乐意将其全部变成一个正则表达式 :)

Answer 1

您可以将组标记为非捕获 (?:.) 不会充当捕获，但在其他方面表现正常。而\d与[0-9]是一样的。但也因为无论如何这都必须是有效的 CSS，您可以假设数据无论如何都是有效的整数/ float ，并且不必执行可选的捕获(如果您不想的话)。

我会这样做:

transform = transform[0].match(/(-?[.\d]+)px, (-?[.\d]+)px/);

或者，使用可选小数点的非捕获组:

transform = transform[0].match(/(-?\d+(?:\.\d+)?)px, (-?\d+(?:\.\d+)?)px/);