0

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

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

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])实际使用这些价值观。

仅获取这两个数字似乎工作量太大,但是我对正则表达式的经验不是很丰富,而且我不知道如何简化这一点。有没有更优雅的解决方案?

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

4

2 回答 2

2

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

我会做:

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

或者,对于可选小数点的非捕获组:

transform = transform[0].match(/(-?\d+(?:\.\d+)?)px, (-?\d+(?:\.\d+)?)px/);
于 2012-11-20T18:48:35.777 回答
0

您可以通过执行以下操作将这两个步骤合二为一:

transform = transform.match(/translate\((-?\d+(?:\.\d*)?)px, (-?\d+(?:\.\d*)?)px\)/);

或者,如果您相信您的输入,您可以执行以下操作:

transform = transform.match(/translate\((.*)px, (.*)px\)/);

简化您的正则表达式。

于 2012-11-20T18:49:46.833 回答