正則表達式（上）

內容提綱：

1.什麼是正則表達式

2.建立正則表達式

 轉載請註明出處，謝謝！

假設用戶須要在HTML表單中填寫姓名、地址、出生日期等。那麼在將表單提交到服務器進一步處理前，JavaScript程序會檢查表單以確認用戶確實輸入了信息而且這些信息是符合要求的。這時候就須要用到正則表達式。

一．什麼是正則表達式

正則表達式(regular expression)是一個描述字符模式的對象。ECMAScript的RegExp類表示正則表達式，而String和RegExp都定義了使用正則表達式進行強大的模式匹配和文本檢索與替換的函數。

正則表達式主要用來驗證客戶端的輸入數據。用戶填寫完表單，單擊按鈕以後，表單就會被髮送到服務器，在服務器端一般會用PHP、ASP.NET等服務器腳本對其進行進一步處理。由於客戶端驗證，能夠節約大量的服務器端的系統資源，而且提供更好的用戶體驗，所在提交到服務器處理以前能夠在客戶端使用正則表達式進行驗證。

 

二．建立正則表達式

建立正則表達式和建立字符串相似，建立正則表達式提供了兩種方法，一種是採用new運算符，另外一個是採用字面量方式。

1.採用new運算符方式

var box = new RegExp('box');                            //第一個參數字符串

var box = new RegExp('box', 'ig');                      //第二個參數可選模式修飾符

 

模式修飾符的可選參數

參  數	含  義
i	忽略大小寫
g	全局匹配
m	多行匹配

2.採用字面量方式

var box = /box/;                                               //直接用兩個反斜槓

var box = /box/ig;                                            //在第二個斜槓後面加上模式修飾符

 

3.測試正則表達式

RegExp對象包含兩個方法：test()和exec()，功能基本類似，用於測試字符串匹配。

test()方法在字符串中查找是否存在指定的正則表達式並返回布爾值，若是存在則返回true，不存在則返回false。

exec()方法也用於在字符串中查找指定正則表達式，若是exec()方法執行成功，則返回包含該查找字符串的相關信息數組。若是執行失敗，則返回null。

 

RegExp對象的方法

方  法	功  能
test	在字符串中測試模式匹配，返回true或false
exec	在字符串中執行匹配搜索，返回結果數組

 

/*使用new運算符的test方法示例*/

var pattern = new RegExp('box', 'i');                      //建立正則模式，不區分大小寫 

var str = 'This is a Box!';                                          //建立要比對的字符串

alert(pattern.test(str));                                            //經過test()方法驗證是否匹配

 

/*使用字面量方式的test方法示例*/

var pattern = /box/i;                                                 //建立正則模式，不區分大小寫

var str = 'This is a Box!';

alert(pattern.test(str));

 

/*使用一條語句實現正則匹配*/(看起來比較亂，通常不建議使用！)

alert(/box/i.test('This is a Box!'));                          //模式和字符串替換掉了兩個變量

/*使用exec返回匹配數組*/

var pattern = /box/i;

var str = 'This is a Box!';

alert(pattern.exec(str));                                       //匹配了返回數組，不然返回null

 

PS：exec方法還有其餘具體應用，咱們在獲取控制學完後再看（見下篇）。

 

4.使用字符串的正則表達式方法

除了test()和exec()方法，String對象也提供了4個使用正則表達式的方法（使用方式與est()和exec()方法做對比）。

 

String對象中的正則表達式方法

方  法	含  義
match(pattern)	返回pattern中的子串或null
replace(pattern, replacement)	用replacement替換pattern
search(pattern)	返回字符串中pattern開始位置
split(pattern)	返回字符串按指定pattern拆分的數組

 

/*使用match方法獲取獲取匹配數組*/

var pattern = /box/ig;                                                   //全局搜索

var str = 'This is a Box!，That is a Box too';

alert(str.match(pattern));                                             //匹配到兩個：Box,Box
alert(str.match(pattern).length);                         　　 //獲取數組的長度

 

/*使用search來查找匹配數據*/

var pattern = /box/ig;

var str = 'This is a Box!，That is a Box too';

alert(str.search(pattern));                                          //查找到第一個而後返回起始位置，不然返回-1

 

PS：由於search方法查找到即返回，也就是說無需g全局。

 

/*使用replace替換匹配到的數據*/

var pattern = /box/ig;

var str = 'This is a Box!，That is a Box too';

alert(str.replace(pattern, 'Tom'));                         //將Box替換成了Tom

 

/*使用split拆分紅字符串數組*/

var pattern = / /ig;                                                //按照空格分隔

var str = 'This is a Box!，That is a Box too';

alert(str.split(pattern));                                      //將空格拆開分組成數組

 

RegExp對象的靜態屬性（用處不大）

屬  性	短  名	含  義
input	$_	當前被匹配的字符串
lastMatch	$&	最後一個匹配字符串
lastParen	$+	最後一對圓括號內的匹配子串
leftContext	$`	最後一次匹配前的子串
multiline	$*	用於指定是否全部的表達式都用於多行的布爾值
rightContext	$'	在上次匹配以後的子串

 

/*使用靜態屬性*/

var pattern = /(g)oogle/;

var str = 'This is google！';

pattern.test(str);                                                //首先要執行一下

alert(RegExp.input);                                         //This is google！

alert(RegExp.leftContext);                                //This is

alert(RegExp.rightContext);                              //！

alert(RegExp.lastMatch);                                   //google

alert(RegExp.lastParen);                                    //g（分組，圓括號，後面講）

alert(RegExp.multiline);                                    //false

 

PS：Opera不支持input、lastMatch、lastParen和multiline屬性。IE不支持multiline屬性。

全部的屬性可使用短名來操做，RegExp.input能夠改寫成RegExp['$_']，依次類推。但RegExp.input比較特殊，它還能夠寫成RegExp.$_。

 

RegExp對象的實例屬性（用處不大）

屬  性	含  義
global	Boolean值，表示g是否已設置
ignoreCase	Boolean值，表示i是否已設置
lastIndex	整數，表明下次匹配將從哪裏字符位置開始
multiline	Boolean值，表示m是否已設置
Source	正則表達式的源字符串形式

 

/*使用實例屬性*/

var pattern = /google/ig;

alert(pattern.global);                                          //true，是否全局了，g

alert(pattern.ignoreCase);                                  //true，是否忽略大小寫，i

alert(pattern.multiline);                                     //false，是否支持換行，m

alert(pattern.lastIndex);                                     //0，下次的匹配位置

alert(pattern.source);                                         //google，正則表達式的源字符串

 

var pattern = /google/g;

var str = 'google google google';

pattern.test(str);                                                 //google，匹配第一次

alert(pattern.lastIndex);                                     //6，第二次匹配的起始位置（要有g）

 

PS：以上基本沒什麼用。而且lastIndex在獲取下次匹配位置上IE和其餘瀏覽器有誤差，主要表如今非全局匹配上。lastIndex還支持手動設置，直接賦值操做。

 更多深刻內容，見正則表達式（下）http://www.cnblogs.com/ttcc/p/3959604.html。

For my lover, CC!

Thank you, Mr Lee!