正则表达式如下
\[\s*((?:[\w\u00c0-\uFFFF-]|\\.)+)\s*(?:(\S?=)\s*(['"]*)(.*?)\3|)\s*\]
这个正则表达式的作用是用来匹配CSS属性选择符,例如:
/*能匹配成功的*/ [class='abcdefg-abcdefg']
/*匹配失败的*/ [class='abcdefg-abcdefg'
成功匹配的过程如下:
短短的文本却需要匹配451步,效率是比较低的,总结一下大概有以下几个问题:
1. ((?:[\w\u00c0-\uFFFF-]|\\.)+) 这一部分表达式是用来匹配属性名称的,+号本身是贪婪匹配的,但是限定在一个分组之后就变成循环了,括号中的表达式会一次次的循环执行,因此效率也就比较低了。
2. (\S?=)部分是用来匹配属性关系符的,例如"="、"~="。当匹配的属性关系符的长度是2时,该表达式并没有问题,\S?能够成功的匹配第一个关系符,例如"~="中的"~"。但是在匹配"="这样只有一个字符的关系符时,\S?= 首先会用\S?来匹配"=",而且这个匹配是成功的,之后会再用表达式中的等号继续匹配,但匹配时失败的,这时候需要增加一次回溯来保证匹配成功,因此这里的回溯也是可以优化的。
3. 在匹配属性值时,使用了一个懒惰型的表达式,即(.*?),这也是按字符循环,速度较慢,可以进行优化。
根据以上的问题相应的做出了以下的改进:
1. ((?:[\w\u00c0-\uFFFF-]|\\.)+) 这一部分之所以要使用分组是因为属性名中可以包含\.这样的字符,在此可以将它视为特殊字符,因此使用(open normal(special normal+)* close)的格式对这部分进行重构,结果为:[\w\u00c0-\uFFFF-]*(\\.[\w\u00c0-\uFFFF-]*)*,这可以以最大的步伐匹配字符。
2. (\S?=)部分需要排除\S?对"="进行匹配的可能性,因此修改为 [^\s=]?
3. (['"]*)(.*?)\3|)匹配属性值的时候之所以使用懒惰匹配是因为使用了反向引用,这里可以使用分组来替换。
根据以上几点做出的修改后,结果如下:
使用优化后的表达式匹配上文相同的文本得到的结果如下:
由原来的451步缩减为21步,是一个相当大的提升,这里匹配属性名和属性值时都是最大步伐的消耗掉文本,而且匹配关系符时不再有回溯。
而实际上浏览器的测试结果也验证了这一点:http://jsperf.com/regexp-test-1
结果显示,在匹配成功的情况下,IE、Firefox的性能提升在1倍以上,Chrome下也超过50%。
而在匹配失败的情况下,优化后的表达式也是回溯次数最少的,性能提升在以上case中也有体现,IE和Firefox下的提升高达4-5倍,Chrome下提升2倍左右。