做CSS精简时可能会用到的正则表达式（http://www.cnblogs.com/AndersLiu/archive/2008/06/24/css-minifying-regular-expressions.html）

[转载] 做CSS精简时可能会用到的正则表达式

原文：http://regexadvice.com/blogs/mash/archive/2008/03/27/Additional-CSS-minifying-regex-patterns.aspx

注意：本文提到的正则表达式都使用了IgnoreCase=true选项。

我观察了YUI Compressor中用于精简CSS的正则表达式，并给出了一些我认为能有助于这一工作的其他正则表达式。

我所看到的代码已经能够通过简单的字符串替换修剪掉“上-右-下-左”值中不必要的零值。但这是通过三个独立的替换操作完成的。如果能用正则表达式处理这种情况，代码将会变得更简单。

（伪代码）

string.Replace(":0 0 0 0;","0;")

string.Replace(":0 0 0;","0;")

string.Replace(":0 0;","0;")

可以变为：

Regex.Replace(input,":("s*0)("s+0){0,3}"s*;",":0;")

够简单了吧。但我想，怎么能就此停滞不前呢？于是我给出了可以处理所有数值的正则表达式：

:"s*(0|(?:(?:"d*".?"d+(?:p(?:[xct])|(?:[cem])m|%|in|ex))))("s+"1){1,3};
（【译注】测试地址：http://regex-lib.net/Regex/Test/?id=d090db4eaf3b41e2b4e75290ad5fe670）

用于进行替换的字符串很简单：“:$1”。

这一步完成后，下面就是处理各个数值并不全为0的情形。

如果您不大了解CSS，这里简单说一下，此处可能出现4个值：

1）如果只指定一个值，则另外三个值也都隐式地指定为相同的值（X = X X X）；

2）如果指定了二个值，则第三个值和第一个相等，第四个值和第二个相等（X Y = X Y X Y）；

3）如果指定了三个值，则第四个值等于第二个值（X Y Z = X Y Z Y）。

当然，在精简时您肯定希望用更短的语法。下面的正则表达式可以使其变短。所有这些情况使用的替换字符串都和前面一样，是“:$1”。

将4个参数替换为2个（X Y X Y变为X Y）

:"s*((0|(?:(?:"d?".?"d(?:p(?:[xct])|(?:[cem])m|%|in|ex))))"s+(0|(?:(?:"d?".?"d(?:p(?:[xct])|(?:[cem])m|%|in|ex)))))"s+"2"s+"3; （【译注】测试地址：http://regex-lib.net/Regex/Test/?id=e47bbb7741bd438e9fd37cae7a9d4a24）

4个变为3个（X Y Z Y变为X Y Z）或3个变为2个（X Y X变为X Y）

:"s*((?:(?:0|(?:(?:"d?".?"d(?:p(?:[xct])|(?:[cem])m|%|in|ex))))"s+)?(0|(?:(?:"d?".?"d(?:p(?:[xct])|(?:[cem])m|%|in|ex))))"s+(?:0|(?:(?:"d?".?"d(?:p(?:[xct])|(?:[cem])m|%|in|ex)))))"s+"2; （【译注】测试地址：http://regex-lib.net/Regex/Test/?id=6bddaab88e724f68a5808d352cc556ca）

较长的这个正则表达式只不过是重复了其中一个子模式而已。

基于以上这些正则表达式，我提出了类似的模式，用来处理border-style、outline-style、border-color和outline-color。

border-style/outline-style

替换字符串为“$1-style:$2;”。

(outline|border)-style"s*:"s*(none|hidden|d(?:otted|ashed|ouble)|solid|groove|ridge|inset|outset )(?:"s+"2){1,3}; （【译注】测试地址：http://regex-lib.net/Regex/Test/?id=e46542e4f8bb48429a9f5c9b7fdc546b）

border-color/outline-color

替换字符串为“$1-color:$2;”。

(outline|border)-color"s*:"s*((?:"#(?:[0-9A-F]{3}){1,2})|"S+)(?:"s+"2){1,3}; （【译注】测试地址：http://regex-lib.net/Regex/Test/?id=05ec5037fcf843609e14c821b7f76034）

(outline|border)-color"s*:"s*(((?:"#(?:[0-9A-F]{3}){1,2})|"S+)"s+((?:"#(?:[0-9A-F]{3}){1,2})|"S+))(?:"s+"3)(?:"s+"4); （【译注】测试地址：http://regex-lib.net/Regex/Test/?id=4a4c4e9dcdf74a97ba3daa113e56a9ca）

(outline|border)-color"s*:"s*((?:(?:(?:"#(?:[0-9A-F]{3}){1,2})|"S+)"s+)?((?:"#(?:[0-9A-F]{3}){1,2})|"S+)"s+(?:(?:"#(?:[0-9A-F]{3}){1,2})|"S+))(?:"s+"3); （【译注】测试地址：http://regex-lib.net/Regex/Test/?id=82fedb7249b041f3a13e5552fc626b47）

我还给出了其他一些用于替换代码的正则表达式，但由于它们都使用了反相匹配，所以移植性会有问题。

这个模式：

"s+((?:[!{};>+()"],])|(?<={[^{}]*):(?=[^}]*})) （【译注】测试地址：http://regex-lib.net/Regex/Test/?id=928254009ef849cfb565022b6489355e）

用于匹配字符前面不必要的空白字符。要小心伪选择器和伪类前面的冒号。替换字符串为“$1”。

这个模式：

(?<!["x22"x27=]"s*)"#([0-9A-F])"1([0-9A-F])"2([0-9A-F])"3 （【译注】测试地址：http://regex-lib.net/Regex/Test/?id=1e210252d62d4cd2a9f0cb9f2513aeb8）

用于精简16进制颜色值，将AABBCC变为ABC。替换字符串为“$1$2$3”。

我还写了一个用于匹配形如“rgb(x,y,z)”的RGB值的正则表达式，其中的x、y、z都在0-255之间。

rgb"s*"x28((?:25[0-5])|(?:2[0-4]"d)|(?:[01]?"d?"d))"s*,"s*((?:25[0-5])|(?:2[0-4]"d)|(?:[01]?"d?"d))"s*,"s*((?:25[0-5])|(?:2[0-4]"d)|(?:[01]?"d?"d))"s*"x29 （【译注】测试地址：http://regex-lib.net/Regex/Test/?id=c616455c751647ff9c1a430f4f0cfb96）

这个模式仅用于匹配现有代码，并将每个数值放到一个组中，以便进行进一步处理。可以使用matchevaluator遍历每一个匹配并完成10进制到16进制的转换。

我自己进行了一些alpha测试，但我写的css根本不能用作测试材料，所以干脆给大家进行beta测试。我并不是很懂CSS hack，因此我不知道这些精简会不会对CSS hack产生负面影响。我还会将这些信息告诉YUI Compressor的维护者，看看他们能不能采纳