【前端學習】javascript正規表達式和字元串RegExp and String（一）

###前言

正規表達式是javascript非常重要和常用的功能，在jquery等大型架構中用的非常頻繁，最近抽時間學習了解了相關知識，記錄下來與需要的朋友分享。

###思維導圖

###RegExp(正規表達式）的建立方式

可以通過兩種方式建立一個RegExp，具體如下：

1. 通過/…/的方式來建立正規表達式（注意： /…/兩邊是沒有單引号或雙引号的）

1. 通過RegExp構造方法來建立一正規表達式

為了更好的描述模式，正規表達式提供了3個辨別，分别是： g/i/m

• g: 全局比對：在整個字元串中比對，而不是在第一次比對後之後停止
• i: 忽略大小寫比對
• m: 對多行字元串中的每一行，應用行首和行末的特殊字元（分别是^和$)

具體看參照下面代碼加深了解：

var regx = new RegExp('are','g');
var regx1 = /are/g;      //常用的建立方式
           

###RegExp執行個體的主要屬性####

根據RegExp的構造函數，我們大概也能猜到RegExp的主要屬性，關于執行個體屬性，了解下就可以了。但有一點要注意：這些執行個體屬性是不能通過for in進行周遊擷取的。 可參照下面代碼加深了解：

var regx1 = /are/g; //常用的建立方式
console.log("source:"+regx.source +" global:"+regx.global+" ignoreCase:"+regx.ignoreCase +" multiline:"+regx.multiline);
// source:are global:true ignoreCase:false multiline:false

for(var p in regx) { //不會進入該for循環
 if(regx.hasOwnProperty(p)) {
  console.log(regx[p]);
 }
}
           

###RegExp執行個體的主要方法 - test####

根據該方法非常簡單，隻有一個參數，常用來驗證輸入的參數與正規表達式模式是否比對，如果比對傳回true，否則傳回false. 可參照下面代碼加深了解：

var regx1 = /are/g;
var res = regx.test('you are a good boy!');
console.log(res) ; //true
var res1 = regx.test('I am a good boy!');
 console.log(res1) ; //false
           

###RegExp執行個體的主要方法 - exec####

法該方法是一個非常常用的方法，需要好好了解。它隻接收一個參數，即要比對的字元串，傳回值卻是一個數組arr，數組裡存儲的是第一個比對項的相關資訊，包括：

• input: 要比對的字元串，exec方法的輸入值

• index:比對性在字元串中的位置
• arr[0]: 模式比對的字元串
• arr[1]…arr[n]: 第n個捕獲組字元串

使用該方法時要注意：如果在正規表達式中未指定全局标志g,則每次執行始終傳回的都是第一個比對項，如果設定了全局标志g，每次調用exec，則會在字元串中繼續查找新比對項

可參照下面代碼加深了解：

var regx = /fn:(\w+)\s+ln:(\w+)\s/g;
 var s ="your fn:xiaoxin ln:tang right?";
 var result = regx.exec(s);
 console.log(result.input); //your fn:xiaoxin ln:tang right?
 console.log(result.index); //5
 console.log(result[0]); //fn:xiaoxin ln:tang
 console.log(result[1]); //xiaoxin
 console.log(result[2]); //tang
  console.log(result[3]); //undefined  因為隻有2個捕獲組，是以列印undefined
           

###RegExp構造函數屬性####

關于函數屬性，可以參照其它程式設計語言（如java)中類的靜态屬性來了解，這些屬性被所有的RegExp執行個體共享，也就是所有的RegExp都可以通路和修改這些屬性，當某個執行個體執行test或exec方法時，這些屬性的值也将跟着發生變化

關于這些屬性，我們可以按照自己的了解記憶：

• input : 需要進行模式比對的字元串，test或exec方法的輸入參數。 參數别名： $-

• lastMatch ： 最近一次比對項 。 參數别名：$&
• leftContext : 比對項左邊的字元串。參數别名：$`
• rightContext : 比對項右邊的字元串 。 參數别名：$’
• $1,$2,$3…: 捕獲組對應的字元串 。

當然這些值，完全可以通過RegExp執行個體執行exec傳回的結果計算得到，那為什麼要在構造函數RegExp中設定這些屬性呢？*

可參照下面代碼加深了解：

var regx = /fn:(\w+)\s+ln:(\w+)\s/g;
var s ="your fn:xiaoxin ln:tang right?";
var result = regx.exec(s);
console.log(RegExp.input); //your fn:xiaoxin ln:tang right?
console.log(RegExp.lastMatch); //fn:xiaoxin ln:tang
console.log(RegExp.leftContext); //your
console.log(RegExp.rightContext); //right?
console.log(RegExp.$1); //xiaoxin
console.log(RegExp.$2); //tang
           

###RegExp - 元字元####

與其它語言中的正規表達式類似， js正規表達式中也存在一些元字元，這些字元有特殊的用途和含義，是以在使用的過程中，需要對這些字元進行轉義，通過在這些字元前加上’’ 進行轉義處理. JS正則表達是的元字元有：

( [ { \ ^ $ | ) ? * + . ] }

###RegExp - 貪婪比對和懶惰比對####

貪婪比對就是在正規表達式的比對過程中，預設會使得比對長度越大越好。在JS正規表達式中，懶惰限定符是 ‘?’ ,在模式中添加 ‘?’ 則要求是懶惰比對。具體參照下面代碼來了解：

var s = 'I am a good boy,you are also a good boy !';
var regx = /good.*boy/g; //貪婪比對
console.log(regx.exec(s)[0]); //good boy,you are also a good boy

var regx1 = /good.*?boy/g; //懶惰比對
console.log(regx1.exec(s)[0]); //good boy
           

####參照文章####

http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp