JavaScript學習1:正規表示式

連江偉發表於2015-03-23

        其實在學習JavaScript之前就知道正規表示式的概念,記得第一次聽說是在學習專業課的時候,那門課程叫做《形式語言與自動機理論》,到現在我還清楚的記得當時學這門課程的時候,那種痛苦,一個學期學下來,根本不知道這門課到底在講什麼,有什麼用?

        後來在準備軟考的時候,又一次的接觸到了這塊的內容,終於是知道了,這門課通篇都在介紹一種叫做文法的東西,喬姆斯基體系將文法分為了四類,分別是0型文法(短語文法)、1型文法(上下文有關文法)、2型文法(上下文無關文法)和3型文法(正則文法),而我們今天要談到的是正則文法產生表示式,即為正規表示式。

        什麼是正規表示式?

        RE(RegularExpression)是一個描述字元模式的物件。在JavaScript中的RegExp類表示正規表示式,而String和RegExp都定義了使用正規表示式進行強大的模式匹配和文字檢索與替換的函式。

        為什麼使用正規表示式?

        假設使用者需要在HTML表單中填寫姓名、地址、出生日期等資訊,那麼在將表單提交到伺服器做進一步處理之前,JavaScript程式會檢查表單以確認使用者的輸入是合法有效的。而程式中的正規表示式主要用來驗證客戶端輸入的資料,是否符合要求,這樣做可以節約大量的伺服器端的系統資源,提高系統效能,並且提供了更好的使用者體驗。

        如何使用正規表示式?

        在JavaScript中有兩種建立正規表示式的方式,一種是採用new運算子,另一個是採用字面量的方式。

        使用new運算子建立

        Varstr=new RegExp(’模式字串’,’模式修飾符(可有可無)’);

        使用字面量方式建立

        Varstr=/模式字串/模式修飾符;

        這個模式修飾符是一個可選引數,主要有以下幾種

 

        建立完之後,就要使用正規表示式了,RegExp物件包含兩個方法:text()和exec(),功能基本相似,用於測試字串匹配。Test()方法在字串中查詢是否存在指定的正規表示式並返回布林值。Exec()方法也是查詢指定的正規表示式,如果執行成功,返回包含該查詢字串的相關資訊陣列,否則返回null。

        瞭解了以上的基礎知識後,接下來我們就要進階了,正規表示式元字元是包含特殊含義的字元,它們有一些特殊功能,可以控制匹配模式的方式,反斜槓後的元字元將失去其特殊含義,我們越來越像實際使用中靠近了。下面我介紹最常用的字元類,如下:

  


        當然還有其他的字元類,比如空白字元、錨字元、替代字元和記錄字元等,這裡不再多做介紹,下面我們來看看如何使用字元類去自己編寫正規表示式,完成我們想要的驗證。

        先來做個手機號碼的驗證表示式

<span style="font-size:18px;"><span style="font-size:18px;"></span>
<span style="font-size:18px;">var pattern=/[1][0-9]{10}/;
var tel='18890089706';
if(!pattern.test(tel))
	alert('請輸入正確的手機號碼!');</span></span>

        最後我們利用剛學到的知識,做一個驗證郵箱地址的函式     

<span style="font-size:18px;"><span style="font-size:18px;"></span>
<span style="font-size:18px;">function VerifyMail(mail){
	var pattern =/^([\w\.\-]+)@([\w\-]+)\.([a-zA-Z]{2,4})$/;
	var str=mail;
	if (pattern.test(str))
		alert('您輸入的郵箱正確無誤!');
	else
		alert('對不起!請您輸入合法的郵箱地址!');
		
};
//呼叫函式驗證郵箱是否正確
VerifyMail('jaidfjai@qq.com');</span></span>

        小結:JavaScript的學習是非常重要的,之所以總結正規表示式的內容,一個是因為以前覺得這個東西很神奇,不是很理解,再者是因為這個很重要,在做Web開發時,表達提交是家常便飯,那麼提交內容的驗證就隨之而來,我們總不能把所以的驗證操作都交給伺服器吧,那樣效率大大滴不好啊。

相關文章