瀏覽器中的正則表達(dá)式陷阱說(shuō)明

更新時(shí)間：2010年05月04日 16:53:04 作者：

js 內(nèi)置對(duì)象 RegExp 我們用的很習(xí)慣也很舒服但是里面卻有嚴(yán)重的隱患或者陷阱...原因在于有些瀏覽器對(duì)正則表達(dá)式直接量的優(yōu)化.

在本章開(kāi)始前我要引入一個(gè)例子來(lái)說(shuō)明這種不徹底的變態(tài)的優(yōu)化到底合理還是不合理...

c# 中的字符串直接量做的優(yōu)化就非常徹底...這種優(yōu)化我們應(yīng)該是歡迎的...

string str="franky";

string str2="franky";

在內(nèi)存中只有一份字符串對(duì)象而str和str2 具備相同的一份引用. 很明顯這非常合理.

string n = "franky", n2 = "franky";
Response.Write((Object.ReferenceEquals(n,n2)).ToString());//True.

那么一些特殊情況下有些瀏覽器為正則表達(dá)式直接量也做了類似的優(yōu)化.

alert(/\d/==/\d/);//所有瀏覽器都是false 這很合理因?yàn)檎齽t表達(dá)式直接量同 [] 數(shù)組直接量 {}對(duì)象直接量一樣都是引用類型

我們?cè)倏纯茨男┣闆r下哪些瀏覽器做了優(yōu)化

    function f2() {
        return /\d/;
    }

alert(f2() == f2());

//這里的結(jié)果就有不同了

ie6 7 8 opear10 safari4 都返回false (我虛擬機(jī)里safari3壞了沒(méi)做測(cè)試.如果誰(shuí)有幫忙測(cè)下告訴我結(jié)果.謝謝我估計(jì)safari3 會(huì)返回true.原因是 maxthon3用的引擎貌似就是safari3 的)

但是

firefox 2.0 3.0+ 3.5 3.6 chrome 4 5 opear9 maxthon3 demo版使用webkit引擎下都返回true

有趣的地方在于 opera9 做了優(yōu)化而opera10 取消了這種優(yōu)化. 看來(lái)至少opera團(tuán)隊(duì)認(rèn)為這種優(yōu)化時(shí)不恰當(dāng)?shù)?..（變相支持了我的觀點(diǎn).）

看到這里你也許會(huì)奇怪是不是 bug而不是所謂優(yōu)化?。?也許是閉包對(duì)象出了什么問(wèn)題或者是函數(shù)對(duì)象上的某些bug引起的？

那么我們看看下面的例子:

for (var i = 0; i < 10; i++) document.writeln(/\d/g.test('' + i));

不同瀏覽器輸出結(jié)果的差異完全符合上面是否做優(yōu)化的分類.

即沒(méi)有做優(yōu)化的瀏覽器一律返回true 而作了優(yōu)化的瀏覽器則是 true false true false 交替的結(jié)果.

我們這里只是一個(gè) 循環(huán) ..js中的循環(huán)沒(méi)有獨(dú)立的作用域更不會(huì)產(chǎn)生閉包對(duì)象那么可以肯定引起這個(gè)怪異問(wèn)題的根本原因就是某些瀏覽器自作聰明的優(yōu)化.

可能大家不太理解 test的結(jié)果差異來(lái)自哪里... 答案是 test 同 exec 一樣如果直接量后面有/g .設(shè)置了 global全局查找參數(shù) 的話那么同一個(gè)test對(duì)象會(huì)記錄上次匹配字符的索引位置.下次再匹配時(shí) 會(huì)從這個(gè)位置開(kāi)始..如果沒(méi)有則匹配索引<0 下次在此匹配時(shí) 就仍然從0位置字符開(kāi)始.

所以上面這個(gè)測(cè)試使用 exec 也是可以的.

那么這里如何避免瀏覽器差異呢？簡(jiǎn)單的辦法去掉/g即可

這里我們?yōu)榱硕惚芟葳?就要記得一個(gè)約定. 請(qǐng)盡量不要使用一個(gè)正則直接量在函數(shù)體內(nèi) 或循環(huán)內(nèi). 如果一定要如此請(qǐng)使用new RegExp('\d',g);這種.

對(duì)于exec 盡量用 string.match代替. 因?yàn)閙atch 強(qiáng)制你依靠是否有 /g 來(lái)全局查找..不會(huì)產(chǎn)生歧義.

對(duì)于test 如果是循環(huán)內(nèi) 也可以考慮 var reg=/\d/; //這里要吧/g去掉..請(qǐng)不要忘記哦

for (var i = 0; i < 10; i++) document.writeln(reg.test('' + i));

事實(shí)上這樣用是最合理的辦法 .原因是這里我們只產(chǎn)生一個(gè)正則對(duì)象并反復(fù)使用他.. 本質(zhì)上也是為了優(yōu)化。但是我們避開(kāi)了瀏覽器自己的優(yōu)化差異導(dǎo)致的不同結(jié)果.

最后我們發(fā)現(xiàn) 所謂陷阱發(fā)生主要是 /g使用不當(dāng).無(wú)論是 exec 還是test都是如此如果合理使用/g 無(wú)論瀏覽器是否存在變態(tài)的優(yōu)化. 執(zhí)行結(jié)果都將是正確的...唯一的區(qū)別只在于做了優(yōu)化的瀏覽器不需要反復(fù)產(chǎn)生一個(gè) 正則對(duì)象然后再垃圾回收再產(chǎn)生一個(gè)正則對(duì)象....如此反復(fù)而已...

那么我們發(fā)現(xiàn) 遵守上面幾個(gè)原則的話這種問(wèn)題也都避免了...