时间戳

首页 > 解决方案 > 如何解析盒子阴影和边框属性以分隔javascript中的值？

javascript - 如何解析盒子阴影和边框属性以分隔javascript中的值？

问题描述

我正在尝试将这些字符串解析为单独的值，但我尝试了 .split(" ") 它无法正常工作

0px none rgb(98, 98, 98) // border
rgba(0, 0, 0, 0.75) 10px 10px 5px 0px // box Shadow

我的方法

"0px none rgb(98, 98, 98)".split(" "); // it also splits rgb spaces
"rgba(0, 0, 0, 0.75) 10px 10px 5px 0px".split(" ");

我想要最终结果

 [ "0px", "none", "rgb(98, 98, 98)" ]
 [ "rgba(0, 0, 0, 0.75)", "10px", "10px", "5px" , "0px"]

提前致谢

标签： javascript

解决方案

您可以改用正则.match表达式

str1 = "0px none rgb(98, 98, 98)"
str2 = "rgba(0, 0, 0, 0.75) 10px 10px 5px 0px"
regexp = /[^\s\(]+(\(.+\))?/g

str1.match(regexp)
=> (3) ["0px", "none", "rgb(98, 98, 98)"]
str2.match(regexp)
=> (5) ["rgba(0, 0, 0, 0.75)", "10px", "10px", "5px", "0px"]

正则表达式的意思是：

  • [^\s\(]+任何不是空格或字符的字符(
  • (\(.+\))?可选地后跟一个(...)字符串

我想同样有更干净的正则表达式，这只是我想出的那个

推荐阅读