Question

给定样式属性字符串，我需要捕获CSS translate()属性的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])实际使用这些值所需的一切。

这对于仅获得这两个数字似乎太多了，但我对正则表达式不是很熟悉，而且我不知道如何简化这一点。对此有更优雅的解决方案吗？

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

Answer 1

您可以将群组标记为非捕获(?:.)不会充当捕获，但行为正常。 \d与[0-9]相同。但也因为这必须是有效的CSS，你可以假定数据将是一个有效的整数/浮点数，并且不必进行可选的捕获（如果你不想要）。

我会这样做：

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

或者，对于可选小数点的非捕获组：

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

Answer 2

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

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

或者如果您信任您的输入，您可以这样做：

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

简化你的正则表达式。