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 回答