使用正则表达式解析rotate3d值的CSS转换

Parsing CSS transform for rotate3d values using regex

本文关键字：值的 CSS 转换 rotate3d 正则表达式      更新时间：2023-09-26

我需要将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)'
]

您可以假设旋转将始终按照CCD_ 1的顺序。

如何在javascript中使用regex？谢谢

假设旋转属性总是按顺序排列在一起，则可以使用以下正则表达式拆分字符串：/'s(?='S+'(.*?'))(?!rotate(?:Y|Z))/。

表达式/'s(?='S+'(.*?'))(?!rotate(?:Y|Z))/将匹配's字符，如果它们后面跟有包含括号的(?='S+'(.*?'))字符。如果后面跟有rotateY/rotateZ和(?!rotate(?:Y|Z))的's字符，它也将取反。

此处示例

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)"
]
相关文章：