将CSS border属性拆分为其各个部分的正则表达式

Question

我想将CSS中的边框属性分解成其组成部分，即：

.someClass{
  border: 1px solid black;
}

Into

border-width: 1px
border-style: solid;
border-color: black;

我已经拆分了冒号和分号，因此只需要解析属性值部分。

在 CSS 中，你可以同时使用上述三个属性的任意组合。

border: 1px solid;
border: solid Gold;
border: 1em;
border: 1mm #000000;
border: 1px inset rgb(12, 44, 199);

所有的都是合法的，所以我需要对此进行核算。

目前为止我的进展如下：

([0-9]+[a-zA-Z|%]+)* *([a-zA-Z]*) *( .*)

这对于正常情况下是有效的，但是在“1px Solid”情况下会失败，因为Solid被放入第3个捕获组而不是第2个。我不是一个正则表达式专家，所以我可能犯了非常基本的错误，但是任何帮助都将不胜感激。我正在使用C#进行开发（但主要在http://gskinner.com/RegExr/测试，所以任何差异可能是问题所在）

- Nymain

Answer 1

在表达式开头简单地包含border:似乎是一个很大的帮助，因为它不会意外匹配第二或第三个组。同样，在表达式末尾添加;也可以防止过早捕获第二或第三个组。除此之外，将第二组从*更改为+也有所帮助，因为这样可以按预期匹配第二组而不是第三组。总的来说，请尝试以下内容：

border: ([0-9]+[a-zA-Z|%]+)* *([a-zA-Z]+)* *( .*)*;

我怀疑这不是完美的，如果你需要100%的工作结果，可能不应该使用单个正则表达式，而应该对字符串进行分词和解析（我非常怀疑CSS规则完全通过正则表达式解析），但是如果这适用于你所需的有限规则，那就太棒了。

- Explosion Pills

---

谢谢，这对我来说似乎工作得非常好，而且为我提供了足够准确的结果。 - Nymain

Answer 2

这可以在不使用正则表达式的情况下发生。 在JS中，可以像这样完成。

const [width, style, ...color] = this.value.split(' ')
console.log([width, style, color.join('')])

我相信C#也有类似于解构的东西

- Rinat Sadykov