用于将 CSS 边框属性拆分为其部分的正则表达式

Question

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

.someClass{
  border: 1px solid black;
}

进入

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

在这之前我已经拆分了边框：和分号，所以我只需要解析属性的值部分

现在在 CSS 中，您可以任意组合以上 3 个属性，所以

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 被放入第三个捕获组，而不是第二个。我不是正则表达式专家，所以我可能会犯非常基本的错误，但任何帮助将不胜感激。我正在使用 C#（但主要是在 http://gskinner.com/RegExr/ 进行测试，所以任何差异都可能是问题所在）

Answer 1

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

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

我怀疑这是否完美，如果您需要 100% 的结果，您可能不应该使用单个正则表达式，而是标记并解析字符串（我非常怀疑 CSS 规则完全使用正则表达式解析），但是如果这适用于您需要的有限规则。