呵呵,先羅嗦幾句,去年用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());
各位路過的大俠如果對本文有什麼看法歡迎在此提出,大家共同學習,共同進步。