呵呵,先羅嗦幾句,去年用C#做了一個語法高亮的小東西,根據配製文件中的信息把所給代碼格式化成HTML,使它能在網頁上顯示出和編輯器裡一樣的語法元素高亮的效果以及支援程式碼折疊。沒錯,就是跟博客園上看到的類似啦。因為我當時使用的是MSN Space,它沒有提供這項功能,只好自己寫一個咯。
我使用的是C#進行編寫,起初使用的是超級繁瑣的for,while,switch,if等基本語句來判斷關鍵字等等,大家莫笑話,本人愚笨當時還不知道正則表達式是何物,所以只能用這種土辦法了,當然土辦法還是有效果的,只是一個函數裡冗長的程式碼,以後要維護起來恐怕是非常難的,心想別的軟體不可能是這麼寫的吧,於是乎在google上搜尋了一陣,找到了些語法高亮的程式碼和開源項目,開起來一看。 。 。 。 。暈,一個個都那麼複雜,說實在我最不喜歡做的事就是看別人代碼了,不是我自命不凡,實在看別人代碼實在是很暈,除非是有非常詳細的文檔描述,要不然我瞄兩眼就不想看了,頂多是看別人接口怎麼寫的,然後猜測他內部要怎麼實現。
雖然搜尋來的東西沒有太大幫助,不過還是讓我知道了正規表達式這個東東,具體忘記哪裡看到的了。當時就開始一邊研究正規表示式一邊改造偶那「破玩意兒」。接著沒多久在博客園重新開博了,終於開用上博客園的語法加亮功能啦,於是自己寫個代碼HTML高亮顯示的東東就失去了一個主要動力了。其次,用C#做的語法高亮模組,只能運行在伺服器端,或WinForm程式上,而我最終要取得的是HTML程式碼以顯示在頁面上,我認為還是客戶端腳本最適合這項工作。只可惜自己對JS並不甚了解。 。 。後來這段時間又胡搞瞎搞別的去了,也沒有再改進那個語法加亮模組了。
昨天加班晚上加班回到家裡,本來打算繼續學習下UML見模,後來想起公司有一個模組需要能剔出資料庫返回結果中的所有HTML標籤,我便打開正則表達式工具RegexBuddy。結果RegexBuddy的說明文件時看到了JScript使用正規表示式的簡單教學,於是乎好奇心又起,打開UltraEdit-32開始寫簡單的JavaScript試驗起來。
我的試驗過程這裡就不多廢話再複述了,因為很多地方是反覆試驗繞很多彎路的,這裡就直接給出試驗總結出來的JScript中正則的用法。
廢話完畢,以下進入正題!
首相講講JScript的正規表示式物件RegExp。
JScript中提供正規表示式操作的類別名為RegExp,可以用兩種方式實例化RegExp類型的物件。
方法一,建構子實例化:
var myRegex = new RegExp(" \w +", "igm ");
//w+為實際正規表示式,注意第一個為轉義之用,igm分別表示忽略大小寫,全域搜索,多行搜索,這個後面會解釋
方法二,直接賦值法:
var myRegex = /w+/igm;
//效果與上一個語句一樣,只是這裡不需要用轉移字符,原正則表達式是什麼樣子就是什麼樣子,igm就和前面例子的igm作用一樣
具體用什麼方式看大家喜好了,個人覺得第二種方式寫的正規比較好讀些,RegexBuddy幫助文件也是推薦第二種方式。 RegExp物件包含以下一些操作:
exec(string str):執行正規表示式匹配,並返回匹配結果,根據MSDN給出的例子運行結果看,exec每次執行都是從上次直接的匹配結束位置開始,而回傳的值似乎是RerExp對象,而RegexBuddy給出的解釋是回傳一個數組,但沒有給詳細例子,我覺得還是根據試驗結果為依據比較可靠。
compile(string regex, string flags):預編譯正規表示式使其運行更快,經過測試的確預先編譯後效率有明顯提升。 regex參數為正規表示式,flags可以為以下3個值的組合: g – 全域搜索,我的試驗結果是不加g標誌就只能匹配第一個符合條件的字串i – 忽略大小寫m –多行搜索,似乎預設已經是多行搜尋了
test(string str):如果str匹配正規表示式返回true,否則返回false,這個類似string物件的match方法
RegExp物件包含以下一些屬性:
index:字串中第一個匹配表達式的位置,初始為-1
input:正規表示式的符合目標,注意是唯讀的
lastIndex:下一個符合表達式的位置,原話是(Returns the character position where the next match begins in a searched string.)也不知道有沒有翻譯錯,這個屬性我沒有用到。
lastMatch:最後一個符合表達式的字串
lastParen:最後一個符合的子符合字串,例如正規表示式裡有多個以()分組的匹配項,lastParen表示最後一組所符合的結果
leftContext:從目標字串的開頭到last match的起始位置的所有字元。
rightContext:從last match的結束位置到整個目標字串的結束位置的所有字元。
$1…$9:表示第n組匹配的結果,這個在正規表示式裡有多個以()分組時有用
接下來講講,JScript中String物件與正規表示式有關的操作:
match(string regex):接受一個正規表示式,並傳回該字串是否與這個表達式相符。
replace(srting regex, string str):將與正規表示式相符的子字串替換為str,這個函數看似簡單,不過還隱藏著更高級用法哦,請看以下例子。
範例1:
var str1 = "A:My name is Peter!nB:Hi Peter!";
str1 = str1.replace(/Peter/g,"Jack");
alert(str1);
這個例子很簡單就是把字串替換了,這則表達式的威力當然不只如此,如果你用的熟練,還能用它完成很多以往需要大量程式碼完成的工作。例如在程式碼關鍵字前後加上因高亮顯示的HTML標籤。從前面例子看來似乎replace只能把符合的文字替換成新的文字啊,怎麼利用它在關鍵字前後插入標籤呢?返過來想像,如果在替換時能利用匹配結果,那麼事情不就好辦了,只要將關鍵字替換為:標籤頭+ 關鍵字+ 標籤尾不就行了。
可是要如何在replace中使用正規表示式匹配的結果呢?
這時候我們就需要用到「匹配變數」了,匹配變數用來表示正規匹配的結果,以下是匹配變數的說明:
$& -- 表示全部匹配組匹配的結果,最後再囉嗦一次,匹配組就是正規表示式的()分組
$$ -- 表示$字符,因為匹配變數用掉了$字符,所以需要轉義
$n -- 類似前面的$1…$9,表示第n組匹配的結果
$nn -- 很簡單就是第nn組匹配的結果
$` -- 就是前面提到的leftContext,像是abcdefg被配對了d那麼abc就是它的leftContext了
$' -- 和上面符合很接近不要看錯了! ,這個就是rightContext了,舉一反三,efg就是上面例子的rightContext了 那麼現在我們要做到在關鍵字前後插入標籤就很簡單了:
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
我寫的範例請看:JScript做語法加亮顯示(程式碼精簡)
一下是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());
各位路過的大俠如果對本文有什麼看法歡迎在此提出,大家共同學習,共同進步。