呵呵，先羅嗦幾句，去年用C#做了一個(gè)語(yǔ)法高亮的小東西，根據(jù)配制文件中的信息把所給代碼格式化成HTML，使它能在網(wǎng)頁(yè)上顯示出和編輯器里一樣的語(yǔ)法元素高亮的效果以及支持代碼折疊。沒錯(cuò)，就是和博客園上看到的類似啦。因?yàn)槲耶?dāng)時(shí)使用的是MSN Space，它沒有提供這項(xiàng)功能，只好自己寫一個(gè)咯。

    我使用的是C#進(jìn)行編寫，起初使用的是超級(jí)繁瑣的for，while，switch，if等基本語(yǔ)句來判斷關(guān)鍵字等等，大家莫笑話，本人愚笨當(dāng)時(shí)還不知道正則表達(dá)式是何物，所以只能用這種土辦法了，當(dāng)然土辦法還是有效果的，只是一個(gè)函數(shù)里冗長(zhǎng)的代碼，以后要維護(hù)起來恐怕是非常難的，心想別的軟件不可能是這么寫的吧，于是乎到google上搜索了一陣，找到了些語(yǔ)法高亮的代碼和開源項(xiàng)目，開起來一看。。。。。暈，一個(gè)個(gè)都那么復(fù)雜，說實(shí)在我最不喜歡做的事就是看別人代碼了，不是我自命不凡，實(shí)在看別人代碼實(shí)在是很暈，除非是有非常詳細(xì)的文檔描述，要不然我瞄兩眼就不想看了，頂多是看看別人接口怎么寫的，然后猜測(cè)他內(nèi)部怎么實(shí)現(xiàn)。

    雖然搜索來的東西沒有多大幫助，不過還是讓我知道了正則表達(dá)式這個(gè)東東，具體忘記哪里看到的了。當(dāng)時(shí)就開始一邊研究正則表達(dá)式一邊改造偶那“破玩意兒”。接著沒多久在博客園重新開博了，終于開用上博客園的語(yǔ)法加亮功能啦，于是自己寫個(gè)代碼HTML高亮顯示的東東就失去了一個(gè)主要?jiǎng)恿α?。其次，用C#做的語(yǔ)法高亮模塊，只能運(yùn)行在服務(wù)器端，或者WinForm程序上，而我最終要獲取的是HTML代碼以顯示在頁(yè)面上，我認(rèn)為還是客戶端腳本最適合這項(xiàng)工作。只可惜自己對(duì)JS并不甚了解。。。后來這段時(shí)間又胡搞瞎搞別的去了，也沒有再改進(jìn)那個(gè)語(yǔ)法加亮模塊了。

    昨天加班晚上加班回到家里，本來打算繼續(xù)學(xué)習(xí)下UML見模，后來想起公司有一個(gè)模塊需要能剔出數(shù)據(jù)庫(kù)返回結(jié)果中的所有HTML標(biāo)簽，我便打開正則表達(dá)式工具RegexBuddy。結(jié)果RegexBuddy的幫助文檔時(shí)看到了JScript使用正則表達(dá)式的簡(jiǎn)單教學(xué)，于是乎好奇心又起，打開UltraEdit-32開始寫簡(jiǎn)單的JavaScript試驗(yàn)起來。

    我的試驗(yàn)過程這里就不多廢話再?gòu)?fù)述了，因?yàn)楹芏嗟胤绞欠磸?fù)試驗(yàn)繞很多彎路的，這里就直接給出試驗(yàn)總結(jié)出來的JScript中正則的用法。

    廢話完畢，下面進(jìn)入正題！   

    首相講講JScript的正則表達(dá)式對(duì)象RegExp。 

    JScript中提供正則表達(dá)式操作的類名為RegExp，可以用兩種方式實(shí)例化RegExp類型的對(duì)象。   

    方法一，構(gòu)造函數(shù)實(shí)例化： 

var myRegex = new RegExp("\\w+", "igm ");  
//\w+為實(shí)際正則表達(dá)式，注意第一個(gè)\為轉(zhuǎn)義之用，igm分別表示忽略大小寫，全局搜索，多行搜索，這個(gè)后面會(huì)解釋  
    方法二，直接賦值法： 

var myRegex = /\w+/igm;  
//效果與上一個(gè)語(yǔ)句一樣，只是這里不需要用轉(zhuǎn)移字符，原正則表達(dá)式是什么樣子就是什么樣子，igm就和前面例子的igm作用一樣 
    具體用什么方式看大家喜好了，個(gè)人覺得第二種方式寫的正則比較好讀些，RegexBuddy幫助文檔也是推薦第二種方式。   RegExp對(duì)象包含以下一些操作：

    exec(string str)：執(zhí)行正則表達(dá)式匹配，并返回匹配結(jié)果，根據(jù)MSDN給出的例子運(yùn)行結(jié)果看，exec每次執(zhí)行都是從上次直接的匹配結(jié)束位置開始，并且返回的值似乎是RerExp對(duì)象，而RegexBuddy給出的解釋是返回一個(gè)數(shù)組，但是沒有給出詳細(xì)例子，我覺得還是根據(jù)試驗(yàn)結(jié)果為依據(jù)比較可靠。   

    compile(string regex, string flags)：預(yù)編譯正則表達(dá)式以使其運(yùn)行更快，經(jīng)過測(cè)試的確預(yù)先編譯后效率有明顯提升。regex參數(shù)為正則表達(dá)式，flags可以為以下3個(gè)值的組合： g – 全局搜索，我的試驗(yàn)結(jié)果是不加g標(biāo)志就只能匹配第一個(gè)符合條件的字符串 i – 忽略大小寫 m – 多行搜索，似乎默認(rèn)已經(jīng)是多行搜索了   

    test(string str)：如果str匹配正則表達(dá)式返回true，否則返回false，這個(gè)類似string對(duì)象的match方法   

    RegExp對(duì)象包含以下一些屬性：

    index：字符串中第一個(gè)匹配表達(dá)式的位置，初始為-1   
    input：正則表達(dá)式的匹配目標(biāo)，注意是只讀的   
    lastIndex：下一個(gè)匹配表達(dá)式的位置，原話是(Returns the character position where the next match begins in a searched string.)也不知道有沒有翻譯錯(cuò)，這個(gè)屬性我沒有用到。   
    lastMatch：最后一個(gè)匹配表達(dá)式的字符串   
    lastParen：最后一個(gè)匹配的子匹配串，比如正則表達(dá)式里有多個(gè)以()分組的匹配項(xiàng)，lastParen表示最后一組所匹配的結(jié)果
    leftContext：從目標(biāo)字符串的開頭到last match的起始位置的所有字符。   
    rightContext：從last match的結(jié)束位置到整個(gè)目標(biāo)字符串的結(jié)束位置的所有字符。   
    $1…$9：表示第n組匹配的結(jié)果，這個(gè)在正則表達(dá)式里有多個(gè)以()分組時(shí)有用

    接下來講講，JScript中String對(duì)象與正則表達(dá)式有關(guān)的操作： 

    match(string regex)：接受一個(gè)正則表達(dá)式，并返回該字符串是否與這個(gè)表達(dá)式匹配。 
    replace(srting regex, string str)：將與正則表達(dá)式匹配的子字符串替換為str，這個(gè)函數(shù)看似簡(jiǎn)單，不過還隱藏著更高級(jí)用法哦，請(qǐng)看以下例子。
    例子1： 

var str1 = "A:My name is Peter!\nB:Hi Peter!";
str1 = str1.replace(/Peter/g,"Jack");
alert(str1);
      這個(gè)例子很簡(jiǎn)單就是把字符串替換了，這則表達(dá)式的威力當(dāng)然不只于此，如果你用的熟練，還能用它完成很多以往需要大量代碼完成的工作。比如在代碼關(guān)鍵字前后加上由于高亮顯示的HTML標(biāo)簽。從前面例子看來似乎replace只能把匹配的文本替換成新的文本啊，怎么利用它在關(guān)鍵字前后插入標(biāo)簽?zāi)?？返過來想象，如果在替換時(shí)能利用匹配結(jié)果，那么事情不就好辦了，只要將關(guān)鍵字替換為：標(biāo)簽頭 + 關(guān)鍵字 + 標(biāo)簽尾 不就行了。

    可是要如何在replace中使用正則表達(dá)式匹配的結(jié)果呢？

    這時(shí)候我們就需要用到“匹配變量”了，匹配變量用于表示正則匹配的結(jié)果，以下是匹配變量的說明： 
    $& -- 表示全部匹配組匹配的結(jié)果，最后再啰嗦一次，匹配組就是正則表達(dá)式的()分組 
    $$ -- 表示$字符，因?yàn)槠ヅ渥兞坑玫袅?字符，所以需要轉(zhuǎn)義 
    $n -- 類似前面的$1…$9，表示第n組匹配的結(jié)果 
    $nn -- 很簡(jiǎn)單就是第nn組匹配的結(jié)果 
    $` -- 就是前面提到過的leftContext，比如abcdefg被匹配出了d那么abc就是它的leftContext了 
    $'  -- 和上面符合很接近不要看錯(cuò)了！，這個(gè)就是rightContext了，舉一反三，efg就是上面例子的rightContext了   那么現(xiàn)在我們要做到在關(guān)鍵字前后插入標(biāo)簽就很簡(jiǎn)單了： 

var str1 = "A:My name is Peter!\nB:Hi Peter!";
str1 = str1.replace(/Peter/g, "<b>$&</b>"); 
alert(str1);
    都0:39了。。。就寫到這里吧。

    正則工具軟件下載（密碼: regex）：regex buddy 2.06.zip
    我寫的例子請(qǐng)看：JScript做語(yǔ)法加亮顯示（代碼精簡(jiǎn)）

    一下是MSDN載抄的一些例子：

function matchDemo()
{
   var s;
   var re = new RegExp("d(b+)(d)","ig");
   var str = "cdbBdbsbdbdz";
   var arr = re.exec(str);
   s = "$1 contains: " + RegExp.$1 + "\n";
   s += "$2 contains: " + RegExp.$2 + "\n";
   s += "$3 contains: " + RegExp.$3;
   return(s);
}
function RegExpTest()
{
  var ver = Number(ScriptEngineMajorVersion() + "." + ScriptEngineMinorVersion())
  if (ver >= 5.5){
    var src = "The rain in Spain falls mainly in the plain.";
    var re = /\w+/g;
    var arr;
    while ((arr = re.exec(src)) != null)
       print(arr.index + "-" + arr.lastIndex + "\t" + arr);
  }
  else{
    alert("You need a newer version of JScript for this to work");
  }
}

function matchDemo()
{
   var s;                                //Declare variable.
   var re = new RegExp("d(b+)(d)","ig"); //Regular expression pattern.
   var str = "cdbBdbsbdbdz";             //String to be searched.
   var arr = re.exec(str);               //Perform the search.
   s = "$1 returns: " + RegExp.$1 + "\n";
   s += "$2 returns: " + RegExp.$2 + "\n";
   s += "$3 returns: " + RegExp.$3 + "\n";
   s += "input returns : " + RegExp.input + "\n";
   s += "lastMatch returns: " + RegExp.lastMatch + "\n";
   s += "leftContext returns: " + RegExp.leftContext + "\n";
   s += "rightContext returns: " + RegExp.rightContext + "\n"; 
   s += "lastParen returns: " + RegExp.lastParen + "\n";
   return(s);                            //Return results.
}
document.write(matchDemo());


    各位路過的大俠如果對(duì)本文有什么看法歡迎在此提出，大家共同學(xué)習(xí)，共同進(jìn)步。

最新評(píng)論