Question

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

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

Answer 1

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

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

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

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

1 个答案: