通过正则表达式从盒子阴影中获取每个值

Question

我正在寻找我现在遇到的问题的建议。我希望能够以编程方式更改box-shadow的值，即：box-shadow: h-shadow v-shadow blur spread color inset;。

我的问题是最糟糕的，我需要它至少有两个属性。

chrome的示例输出： box-shadow: rgb(0, 0, 0) 0px 5px 10px, rgb(255, 255, 255) 0px 4px 10px inset;

所以我的问题是

1. 我怎么能先把这两种风格分开，只是.split(",")不会因为它创建一个数组而因为rgb（,,）
2. 如果我分开它，如果在HEX，rgb或rgba的情况下如何照顾，那么正则表达式是否足够？

编辑：我必须能够在浏览器中进行此分割，这就是我为js解决方案而烦恼的原因

谢谢。

---

解决方案

使用@BYossarian回答我添加了以下内容以继续拆分不同的box-shadow值

string.split(/,(?![^(]*))/);

以及以下分割空格

string.split(/ (?![^(]*))/);

输出

[“rgb（0,0,0）”，“0px”，“5px”，“12px”，“0px”]

其余的只是寻找字符串

var box_shadow_properties = box_shadow.split（/（？！[^（] *））/）;

ie：获取h-shadow v-shadow模糊传播属性if（box_shadow_properties [i] .indexOf（“px”）！== -1）

即：获取颜色属性 if（box_shadow_properties [i] .indexOf（“rgb”）！== -1 || box_shadow_properties [i] .indexOf（“＃”）！== -1）

希望有人发现这个有用的

Answer 1

在分割字符串方面，唯一的逗号应该在括号内作为颜色值的一部分，或者分隔各种框阴影值。由于您希望沿后者拆分，因此您需要查找未打开的右括号后面的逗号。即没有'''的逗号，没有''（'逗号和'之间'）。 你可以使用正则表达式来做到这一点：

/,(?![^\(]*\))/

这样你就可以使用：

string.split（/（[^（*））/？！）;

然后，在识别颜色值方面，您可能需要先查看：

http://www.w3.org/TR/css3-color/

Answer 2

不是基于正则表达式的解决方案，但值得了解：

使用LESS，您可以将每个阴影值绑定到变量，如下所示：

@a: rgb(0, 0, 0) 0px 5px 10px;
@b: rgb(255, 255, 255) 0px 4px 10px inset;

some_element {
   box-shadow: @a, @b; 
}

然后使用LESS内置函数modifyVars()在运行时使用javascript修改它们：

less.modifyVars({
   '@a': 'rgb(0, 0, 255) 6px 5px 20px'
});