穿越小说排行榜,古风小说君子以泽

主頁 > 知識(shí)庫 > 如何實(shí)現(xiàn)正則表達(dá)式的JavaScript的代碼高亮

如何實(shí)現(xiàn)正則表達(dá)式的JavaScript的代碼高亮

今天想改一下JS的高亮的配色，憋了一下午憋出了這個(gè)這個(gè)正則表達(dá)式。
　　下面這老長老長了的玩意兒是個(gè)正則表達(dá)式，看到了別嚇壞了。

復(fù)制代碼代碼如下:

/(\/\/.*|\/\*[\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)在，我們可以來慢慢分析它。仔細(xì)看這個(gè)正則表達(dá)式你會(huì)發(fā)現(xiàn)，它們是很多個(gè)正則表達(dá)式用|連接起來的?，F(xiàn)在，我們把它用|分割，逐個(gè)分析。

復(fù)制代碼代碼如下:

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

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

復(fù)制代碼代碼如下:

\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個(gè)，這些只是匹配一些關(guān)鍵字，由于需要的顏色不同所以被分組了。這沒什么好說的，跳過。

復(fù)制代碼代碼如下:

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

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

復(fù)制代碼代碼如下:

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

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

復(fù)制代碼代碼如下:

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

　　這是第九個(gè)，匹配正則表達(dá)式的。前面有個(gè)非獲取匹配，匹配非括號(hào)的結(jié)束。因?yàn)槿绻嬖诶ㄌ?hào)，那么斜桿就有可能表示的是除號(hào)而不是正則表達(dá)式了。后面就是正則表達(dá)式的匹配，和字符串的匹配類似，只不過最后多了一個(gè)[gim]*。這是正則表達(dá)式的三種匹配模式，也是屬于正則表達(dá)式的范疇，所以我們要匹配并獲取它。

復(fù)制代碼代碼如下:

[\S\s]

　　最后一個(gè)是匹配所有上面沒有匹配到的字符，我們必須匹配到每一個(gè)字符。因?yàn)樗鼈兌夹枰鲆淮蜨TML轉(zhuǎn)義。
　　這樣，這個(gè)長長的正則就分析完了。下面是實(shí)現(xiàn)的例子。

復(fù)制代碼代碼如下:

style>body {font:14px/18px Consolas;}/style>
script id="code">
//讀入當(dāng)前代碼
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);
    //每個(gè)獲取匹配的位置都著上不同的顏色
    switch(i){
      case 1://注釋
      return s.fontcolor("#998877").italics();
      case 2:case 3://字符串
      return s.fontcolor("#AA5544");
      case 4://關(guān)鍵詞
      return s.fontcolor("#333388");
      case 5://內(nèi)置對(duì)象
      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://正則表達(dá)式
      //這個(gè)比較特殊，匹配到的和獲取的有些不同
      //匹配的時(shí)候，前面有個(gè)非獲取匹配，所以我們要保留非獲取匹配的部分
      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,"quot;":/"/g,"#039;":/'/g,
    "lt;"://g,"gt;":/>/g,"br/>":/\n/g,
    "nbsp;":/ /g,"nbsp;nbsp;":/\t/g
})e=e.replace(s[i],i);
return e;
};
/script>

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

您可能感興趣的文章:

PHP正則表達(dá)式基本函數(shù) 修飾符元字符和需轉(zhuǎn)義字符說明
JavaScript正則表達(dá)式驗(yàn)證身份證號(hào)碼是否合法(兩種方法)
如何用javascript正則表達(dá)式驗(yàn)證身份證號(hào)碼是否合法
正則表達(dá)式提取img的src
javascript正則表達(dá)式參數(shù)/g與/i及/gi的使用指南
php使用curl和正則表達(dá)式抓取網(wǎng)頁數(shù)據(jù)示例
JS使用replace()方法和正則表達(dá)式進(jìn)行字符串的搜索與替換實(shí)例
javascript中正則表達(dá)式反向引用示例介紹
JavaScript表單通過正則表達(dá)式驗(yàn)證電話號(hào)碼
C#正則表達(dá)式轉(zhuǎn)義字符介紹

標(biāo)簽：泰州重慶銅川綿陽長沙宣城無錫西安

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《如何實(shí)現(xiàn)正則表達(dá)式的JavaScript的代碼高亮》，本文關(guān)鍵詞如何,實(shí)現(xiàn),正則,表達(dá)式,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。