javascript - 使用正则表达式解析Rotate3d值的CSS变换

我需要将css转换值分成一个数组，但将旋转值保持在一起。

例如：

'translate3d(20px, 5px, 10px) rotateX(20deg) rotateY(10deg) rotateZ(0deg) skew3d(20deg, 10deg) rotateX(-20deg) rotateY(100deg) rotateZ(-30deg)'

需要是

[
    'translate3d(20px, 5px, 10px)',
    'rotateX(20deg) rotateY(10deg) rotateZ(0deg)',
    'skew3d(20deg, 10deg)',
    'rotateX(-20deg) rotateY(100deg) rotateZ(-30deg)'
]

您可以假定旋转将始终按此顺序rotateX(20deg) rotateY(10deg) rotateZ(0deg)。

如何在javascript中使用正则表达式执行此操作？谢谢！

最佳答案

假定rotate属性始终在一起，则可以使用以下正则表达式拆分字符串：/\s(?=\S+\(.*?\))(?!rotate(?:Y|Z))/。

如果/\s(?=\S+\(.*?\))(?!rotate(?:Y|Z))/字符后跟\s包含括号的某些字符，则表达式(?=\S+\(.*?\))将与\s字符匹配。如果rotateY / rotateZ后跟(?!rotate(?:Y|Z))，也会取消字符。

Example Here

var string = 'translate3d(20px, 5px, 10px) rotateX(20deg) rotateY(10deg) rotateZ(0deg) skew3d(20deg, 10deg) rotateX(-20deg) rotateY(100deg) rotateZ(-30deg)';
var properties = string.split(/\s(?=\S+\(.*?\))(?!rotate(?:Y|Z))/);

返回值：

[
    "translate3d(20px, 5px, 10px)",
    "rotateX(20deg) rotateY(10deg) rotateZ(0deg)",
    "skew3d(20deg, 10deg)",
    "rotateX(-20deg) rotateY(100deg) rotateZ(-30deg)"
]