今天想改一下JS的高亮的配色，憋了一下午憋出了這個這個正則表達式。

下面這老長老長了的玩意兒是個正則表達式，看到了別嚇壞了。

代碼如下:

/(\/\/.*|\/\*[\S\s]+?\*\/)|((["'])(?:\\.|[^\\\n])*?\3)|\b(break|continue|do|for|in|function|if|else|return|switch|this|throw|try|catch|finally|var|while|with|case|new|typeof|instance|delete|void)\b|\b(Object|Array|String|Number|Boolean|Function|RegExp|Date|Math|window|document|navigator|location)\b|\b(true|false)\b|\b(null|undefined|NaN)\b|(?:[^\W\d]|\$)[\$\w]*|(0[xX][0-9a-fA-F]+|\d+(?:\.\d+)?(?:[eE]\d+)?)|(?:[^\)\]\}]|^)(\/(?!\*)(?:\\.|[^\\\/\n])+?\/[gim]*)|[\S\s]/g

現(xiàn)在，我們可以來慢慢分析它。仔細看這個正則表達式你會發(fā)現(xiàn)，它們是很多個正則表達式用|連接起來的。現(xiàn)在，我們把它用|分割，逐個分析。

代碼如下:

(\/\/.*|\/\*[\S\s]+?\*\/)

這是第二個，這個正則表達式是用來匹配字符串的。字符串可以在單引號和雙引號中，所以我們匹配這兩個的任意一個。這里需要用一個括號把它括起來表示它是一個獲取匹配（“獲取匹配”的“獲取”是名詞），因為在結(jié)束的地方還需要匹配這個字符。在匹配字符串結(jié)束的地方可以用后向引用\3來匹配字符串開始的字符，也就是開始時的引號種類。如果你從這整個正則表達式的開頭開始數(shù)，你就會發(fā)現(xiàn)["']外面的括號是整個正則表達式中的第三個獲取匹配。這就是字符串的頭尾部分，中間的部分由于字符串是可以包含轉(zhuǎn)義的，所以我們一旦遇到反斜杠就直接跳過它后面那個字符，因為反斜杠后面包含的是轉(zhuǎn)義。但是這僅僅是匹配轉(zhuǎn)義，所以我們要用或運算|連接一個匹配非轉(zhuǎn)義的表達式，那就是[^\\]?？墒沁@個是匹配非反斜杠的任何字符，它可以包含換行，而JS中的字符串是不允許寫成換行的。所以我們需要加個\n讓它不匹配換行。由于我們使用了或來連接，而或的優(yōu)先級非常低，所以需要在旁邊加上括號來修正優(yōu)先級。如果使用普通的括號就會占用一個獲取匹配，所以我們要使用(?:)來完成一個非獲取匹配。

代碼如下:

\b(break|continue|do|for|in|function|if|else|return|switch|this|throw|try|catch|finally|var|while|with|case|new|typeof|instance|delete|void)\b|\b(Object|Array|String|Number|Boolean|Function|RegExp|Date|Math|window|document|navigator|location)\b|\b(true|false)\b|\b(null|undefined|NaN)\b

這是第3、4、5、6個，這些只是匹配一些關鍵字，由于需要的顏色不同所以被分組了。這沒什么好說的，跳過。

代碼如下:

(?:[^\W\d]|\$)[\$\w]*

這是第七個，它的作用是匹配普通的變量名。如果變量名的字符不消耗掉，后面匹配數(shù)字的就有可能會把變量名中的數(shù)字匹配輸出來。所以這一步是必須的。你會發(fā)現(xiàn)這一步?jīng)]有任何獲取匹配，因為變量名的顏色是默認顏色，我們不獲取它。根據(jù)JS的命名規(guī)則，變量名是不能以數(shù)字開頭的，所以我們用[^\W\d]|\$匹配一個變量的開頭。后面則可以匹配數(shù)字、字母、下劃線、美元符號，任意次。這樣變量名就被消耗掉了。

代碼如下:

(0[xX][0-9a-fA-F]+|\d+(?:\.\d+)?(?:[eE]\d+)?)

這是第八個，匹配數(shù)字的。由于數(shù)字的表達方式有兩種，所以我們要分開寫。|的左邊是16進制的數(shù)字寫法。右邊是普通的數(shù)字寫法，這個可以包含小數(shù)和科學計數(shù)法。由于小數(shù)和科學計數(shù)法都是可選存在的，所以我們把它括號起來，后面加上問號作為可選匹配。

代碼如下:

(?:[^\)\]\}]|^)(\/(?!\*)(?:\\.|[^\\\/\n])+?\/[gim]*)

這是第九個，匹配正則表達式的。前面有個非獲取匹配，匹配非括號的結(jié)束。因為如果存在括號，那么斜桿就有可能表示的是除號而不是正則表達式了。后面就是正則表達式的匹配，和字符串的匹配類似，只不過最后多了一個[gim]*。這是正則表達式的三種匹配模式，也是屬于正則表達式的范疇，所以我們要匹配并獲取它。

代碼如下:

[\S\s]

最后一個是匹配所有上面沒有匹配到的字符，我們必須匹配到每一個字符。因為它們都需要做一次HTML轉(zhuǎn)義。

這樣，這個長長的正則就分析完了。下面是實現(xiàn)的例子。

代碼如下:

<style>body {font:14px/18px Consolas;}</style>

<script id="code">

//讀入當前代碼

var code=document.getElementById("code").innerHTML;

//修正換行的瀏覽器差異，去掉頭尾的換行和空格

code=code.replace(/\r\n|[\r\n]/g,"\n").replace(/^\s+|\s+$/g,"");

//開始主匹配

code=code.replace(/(\/\/.*|\/\*[.\s]+?\*\/)|((["'])(?:\\.|[^\\\n])*?\3)|\b(break|continue|do|for|in|function|if|else|return|switch|this|throw|try|catch|finally|var|while|with|case|new|typeof|instance|delete|void)\b|\b(Object|Array|String|Number|Boolean|Function|RegExp|Date|Math|window|document|navigator|location)\b|\b(true|false)\b|\b(null|undefined|NaN)\b|(?:[^\W\d]|\$)[\$\w]*|(0[xX][0-9a-fA-F]+|\d+(?:\.\d+)?(?:[eE]\d+)?)|(?:[^\)\]\}]|^)(\/(?!\*)(?:\\.|[^\\\/\n])+?\/[gim]*)|[.\s]/g,function(){

var a,l,i,s;

a=arguments;

//循環(huán)匹配到的位置

for(i=1;i<=9;i++)if(s=a[i]){

s=htmlEncode(s);

//每個獲取匹配的位置都著上不同的顏色

switch(i){

case 1://注釋

return s.fontcolor("#998877").italics();

case 2:case 3://字符串

return s.fontcolor("#AA5544");

case 4://關鍵詞

return s.fontcolor("#333388");

case 5://內(nèi)置對象

return s.fontcolor("#5555AA");

case 6://布爾值

return s.fontcolor("#DD6600");

case 7://空值

return s.fontcolor("#BB4433");

case 8://數(shù)字

return s.fontcolor("#CC3322");

case 9://正則表達式

//這個比較特殊，匹配到的和獲取的有些不同

//匹配的時候，前面有個非獲取匹配，所以我們要保留非獲取匹配的部分

return htmlEncode(a[0]).replace(s,s.fontcolor("#33AA33"));

};

};

//沒有獲取匹配就直接轉(zhuǎn)義輸出

return htmlEncode(a[0]);

});

//輸出結(jié)果

document.write(code);

//HTML的轉(zhuǎn)義函數(shù)

function htmlEncode(e){

var i,s;

for(i in s={

"&":/&/g,""":/"/g,"'":/'/g,

"<":/</g,">":/>/g,"<br/>":/\n/g,

" ":/ /g," ":/\t/g

})e=e.replace(s[i],i);

return e;

};

</script>

由于今天在趕這篇文章，沒時間做這個代碼的優(yōu)化了。應該還有很多小漏洞，不過整體思路就是這樣。這樣無論是JS還是其它什么語言，代碼高亮都可以直接正則匹配出來。

更多信息請查看IT技術專欄