我需要将 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 中的正则表达式执行此操作?谢谢!
最佳答案
假设旋转属性始终按顺序排列在一起,您可以使用以下正则表达式拆分字符串:/\s(?=\S+\(.*?\))(?!rotate(? :Y|Z))/
.
表达式 /\s(?=\S+\(.*?\))(?!rotate(?:Y|Z))/
将匹配 \s
字符,如果它们后面跟着 (?=\S+\(.*?\))
一些包含括号的字符。如果 \s
字符后面跟着 rotateY
/rotateZ
和 (?!rotate(?:Y|Z ))
。
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)"
]
关于javascript - 使用正则表达式解析旋转3d值的CSS变换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34005638/