javascript正則表達式速查

聲明：本文爲原創文章，如需轉載，請註明來源並保留原文連接前端小尚，謝謝！

做用

---

1. 數據有效性驗證
2. 替換文本
3. 提取文本

聲明方式

---

字面量的聲明方式

示例：var re = /a/gi;

RegExp聲明方式

var re = new RegExp();  //RegExp是一個對象,和Aarray同樣
//但這樣沒有任何效果,須要將正則表達式的內容做爲字符串傳遞進去

re =new RegExp("a");    //最簡單的正則表達式,將匹配字母a
re=new RegExp("a","i"); //第二個參數,表示匹配時不分大小寫

RegExp構造函數第一個參數爲正則表達式的文本內容，而第二個參數則爲可選項標誌.標誌能夠組合使用,兩個參數都是字符串。

建立這個字符串時要多加當心，由於反斜槓在正則表達式和在字符串字面量中有一些不一樣的含義。一般須要雙寫反斜槓,以及對引號進行轉義。(表如今低版本瀏覽器上)

var str='a/b\\c';
var reg=/^a\/b\\c$/;

document.write(str+'<br />');               //==>a/b\c

document.write(reg.test(str)+'<br />');     //==>true

var reg1=new RegExp('^a/b\\\\c$');
var reg2=new RegExp('^a/b\\\\c$');
document.write(reg1.test(str)+'<br />');     //==>true，低版本瀏覽器爲false
document.write(reg2.test(str)+'<br />');     //==>true，這纔是正確寫法

正則表達式的定義

---

一個正則表達式就是由普通字符（例如字符 a 到 z）以及特殊字符（稱爲元字符）組成的文字模式。該模式描述在查找文字主體時待匹配的一個或多個字符串。正則表達式做爲一個模板，將某個字符模式與所搜索的字符串進行匹配。

修飾符

---

• g（全文查找）
• i（忽略大小寫）
• m（多行查找）

示例：

var re = new RegExp("a","gi");  //匹配全部的a或A
var re=/a/gi;                   //同上

字符類

//簡單類
var re = /[abc123]/;//將匹配abc123這6個字符中一個
//負向類
re = /[^abc]/;//將匹配除abc以外的一個字符
//範圍類
re = /[a-b]/;//將匹配小寫a-b 26個字母
re = /[^0-9]/;//將匹配除0-9 10個字符之處的一個字符
//組合類
re = /[a-b0-9A-Z_]/;//將匹配字母，數字和下劃線

元字符

特殊字符	描述	預約義類	描述	等同於
\n	換行符	.	匹配除換行符以外的任何一個字符	IE下[^\n]，其它[^\n\r]
\r	回車符	\d	匹配數字	[0-9]
\t	製表符	\D	匹配非數字字符	[^0-9]
\f	換頁符（Tab）	\s	匹配一個空白字符	[ \n\r\t\f\x0B]
\cX	與X對應的控制字符	\S	匹配一個非空白字符	[^ \n\r\t\f\x0B]
\b	退格符(BackSpace)	\w	匹配字母數字和下劃線	[a-zA-Z0-9_]
\v	垂直製表符	\W	匹配除字母數字下劃線以外的字符	[^a-zA-Z0-9_]
\0	空字符("")

查看更多

量詞

代碼	描述
*	匹配前面的子表達式零次或屢次。例如，zo* 能匹配 "z" 以及 "zoo"。 * 等價於{0,}。
+	匹配前面的子表達式一次或屢次。例如，'zo+' 能匹配 "zo" 以及 "zoo"，但不能匹配 "z"。+ 等價於 {1,}。
?	匹配前面的子表達式零次或一次。例如，"do(es)?" 能夠匹配 "do" 或 "does" 中的"do" 。? 等價於 {0,1}。
{n}	n 是一個非負整數。匹配肯定的 n 次。例如，'o{2}' 不能匹配 "Bob" 中的 'o'，可是能匹配 "food" 中的兩個 o。
{n,}	n 是一個非負整數。至少匹配n 次。例如，'o{2,}' 不能匹配 "Bob" 中的 'o'，但能匹配 "foooood" 中的全部 o。'o{1,}' 等價於 'o+'。'o{0,}' 則等價於 'o*'。
{n,m}	m 和 n 均爲非負整數，其中n <= m。最少匹配 n 次且最多匹配 m 次。劉， "o{1,3}" 將匹配 "fooooood" 中的前三個 o。'o{0,1}' 等價於 'o?'。請注意在逗號和兩個數之間不能有空格。

貪婪量詞與惰性量詞

用貪婪量詞進行匹配時，它首先會將整會字符串當成一個匹配，若是匹配的話就退出，若是不匹配，就截去最後一個字符進行匹配，若是不匹配，繼續將最後一個字符截去進行匹配，直到有匹配爲止。直到如今咱們遇到的量詞都是貪婪量詞

用惰性量詞進行匹配時，它首先將第一個字符當成一個匹配，若是成功則退出，若是失敗，則測試前兩個字符，依些增長，直到遇到合適的匹配爲止

var str = "abc";
var re = /\w+/; //將匹配abc
re = /\w+?/;    //將匹配a

轉義

下列字符是須要轉義的字符：
\ / [ ] ( ) { } ? + * | . ^ $

使用前須要反斜槓，例如：

var str='ab+c',
    reg=/^ab\+c$/;
reg.test(str);      //true

分支（也就是所說的「或」）

一個正則表達式分支包含一個或多個正則表達式序列。這些序列被|（豎線）字符分隔。若是這些序列中的任何一項符合匹配條件，那麼這個選擇就被匹配。它嘗試按順序依次匹配這些序列項。因此，當前者被匹配後，後面就不會再被匹配了。

re = /^a|bc$/;//將匹配開始位置的a或結束位置的bc
str ="add";
alert(re.test(str));//true
re = /^(a|bc)$/;//將匹配a或bc
str ="bc";
alert(re.test(str));//true

分組與非捕獲性分組

re = /abc{2}/;//將匹配abcc
re = /(abc){2}/;//將匹配abcabc
//上面的分組都是捕獲性分組
str = "abcabc ###";
arr = re.exec(str);
alert(arr[1]);//abc
alert(RegExp.$1);//abc
//非捕獲性分組 (?:)
re = /(?:abc){2}/;
arr = re.exec(str);
alert(arr[1]);//undefined

正/負向前瞻

正向前瞻,用來捕獲出如今特定字符以前的字符,只有當字符後面跟着某個特定字符纔去捕獲它。
與正向前瞻對應的有負向前瞻，它用匹配只有當字符後面不跟着某個特定字符時纔去匹配它。

在執行前瞻和負向前瞻之類的運算時，正則表達式引擎會留意字符串後面的部分，然而卻不移動index。

//正向前瞻
re = /([a-z]+(?=\d))/i;
//咱們要匹配後面跟一個數字的單詞，而後將單詞返回，而不要返回數字
str = "abc every1 abc";
alert(re.test(str));//true
alert(RegExp.$1);//every
alert(re.lastIndex);//使用前瞻的好處是,前瞻的內容(?=\d)並不會當成一次匹配，下次匹配仍從它開始
//負向前瞻(?!)
re = /([a-z](?!\d))/;i
//將匹配後面不包含數字的字母,而且不會返回(?!\d)中的內容
str = "abc1 one";
alert(re.test(str));
alert(RegExp.$1);//one

多行模式

var re = /[a-z]$/;
var str = "ab\ncdef";
alert(str.replace(re,"#"));//ab\ncde#
re =/[a-z]$/m;
alert(str.replace(re,"#"));//a#\ncde#

RegExp對象

---

方法

1. test(),返回一個 Boolean 值，它指出在被查找的字符串中是否存在模式。若是存在則返回 true，不然就返回 false。

   var str = "Visit W3School",
       patt1 = new RegExp("W3School"),
       result = patt1.test(str);
   document.write(result);    //true

2. exec(),返回一個數組，其中存放匹配的結果。若是未找到匹配，則返回值爲 null。

   若是 exec() 找到了匹配的文本，則返回一個結果數組。不然，返回 null。此數組的第 0 個元素是與正則表達式相匹配的文本，第 1 個元素是與 RegExpObject 的第 1 個子表達式相匹配的文本（若是有的話），第 2 個元素是與 RegExpObject 的第 2 個子表達式相匹配的文本（若是有的話），以此類推。除了數組元素和 length 屬性以外，exec() 方法還返回兩個屬性。index 屬性聲明的是匹配文本的第一個字符的位置。input 屬性則存放的是被檢索的字符串 string。咱們能夠看得出，在調用非全局的 RegExp 對象的 exec() 方法時，返回的數組與調用方法 String.match() 返回的數組是相同的。

   可是，當 RegExpObject 是一個全局正則表達式時，exec() 的行爲就稍微複雜一些。它會在 RegExpObject 的 lastIndex 屬性指定的字符處開始檢索字符串 string。當 exec() 找到了與表達式相匹配的文本時，在匹配後，它將把 RegExpObject 的 lastIndex 屬性設置爲匹配文本的最後一個字符的下一個位置。這就是說，您能夠經過反覆調用 exec() 方法來遍歷字符串中的全部匹配文本。當 exec() 再也找不到匹配的文本時，它將返回 null，並把 lastIndex 屬性重置爲 0。

   var str = "Visit W3School",
       patt = new RegExp("(W3)School", "g"),
       result;
   while ((result = patt.exec(str)) != null) {
       document.write(result);     //W3School,W3
       document.write("<br />");
       document.write(patt.lastIndex); //14
   }

3. compile(),用於改變和從新編譯正則表達式。

   var str="Every man in the world! Every woman on earth!";
   
   patt=/man/g;
   str2=str.replace(patt,"person");
   document.write(str2+"<br />");
   //Every person in the world! Every woperson on earth!
   
   patt=/(wo)?man/g;
   patt.compile(patt);
   str2=str.replace(patt,"person");
   document.write(str2);
   //Every person in the world! Every person on earth!

屬性

實例的屬性

1. source,返回正則表達式的源文本。

   var str = "Visit W3School.com.cn",
       patt1 = new RegExp("W3S","g");
   document.write(patt1.source);   //W3S

2. lastIndex,返回一個整數，標示開始下一次匹配的字符位置。

   上次匹配的結果是由方法 RegExp.exec() 和 RegExp.test() 找到的，它們都以 lastIndex 屬性所指的位置做爲下次檢索的起始點。這樣，就能夠經過反覆調用這兩個方法來遍歷一個字符串中的全部匹配文本。

   該屬性是可讀可寫的。只要目標字符串的下一次搜索開始，就能夠對它進行設置。當方法 exec() 或 test() 再也找不到能夠匹配的文本時，它們會自動把 lastIndex 屬性重置爲 0。

   var str = "The rain in Spain stays mainly in the plain";
   var patt1 = new RegExp("ain", "g");
   
   patt1.test(str);
   document.write(patt1.lastIndex);    //分別輸出：八、1七、2八、43

3. global,RegExp 對象是否具備標誌 g。
4. ignoreCase,RegExp 對象是否具備標誌 i。

5. multiline,RegExp 對象是否具備標誌 m。

對象的屬性

1. $1...$9,返回九個在模式匹配期間找到的、最近保存的部分。只讀。

   當包含分組的正則表達式進行過test,match,search這些方法以後，每一個分組都被放在一個特殊的地方以備未來使用，這些存儲是分組中的特殊值，咱們稱之爲反向引用。

   var re = /(A?(B?(C?)))/;
   /*上面的正則表達式將依次產生三個分組
   (A?(B?(C?))) 最外面的
   (B?(C?))
   (C?)*/
   str = "ABC";
   re.test(str);//反向引用被存儲在RegExp對象的靜態屬性$1—$9中
   alert(RegExp.$1+"\n"+RegExp.$2+"\n"+RegExp.$3);
   //反向引用也能夠在正則表達式中使用\1 ,\2...這類的形式使用
   re = /\d+(\D)\d+\1\d+/;
   str = "2008-1-1";
   alert(re.test(str));//true
   str = "2008-4_3";
   alert(re.test(str));//false

2. input、RegExp["$_"],返回執行規範表述查找的字符串。只讀。
3. lastMatch、RegExp["$_"],返回任何正則表達式搜索過程當中的最後匹配的字符。只讀。
4. lastParen、RegExp["$+"],若是有的話，返回任何正則表達式查找過程當中最後括的子匹配。只讀。
5. leftContext、RegExp["$`"],返回被查找的字符串中從字符串開始位置到最後匹配以前的位置之間的字符。只讀。
6. rightContext、RegExp["$'"],返回被搜索的字符串中從最後一個匹配位置開始到字符串結尾之間的字符。只讀。

7. RegExp["$&"],匹配regexp的字串

示例：

var text='this has been a short summer';
var pattern=/(.)hort/g;

if(pattern.test(text)){
    //test()爲true，返回執行規範表述查找的字符串，不然爲空
    console.log(RegExp['$_']);  //this has been a short summer
    //返回正則表達式匹配項前面的字符串
    console.log(RegExp['$`']);  //this has been a 
    //返回正則表達式匹配項後面的字符串
    console.log(RegExp["$'"]);  // summer
    //返回正則表達式匹配項的字符串
    console.log(RegExp['$&']);  //short
     //？
    console.log(RegExp['$*']);  //false
};

String對象的正則方法

---

1. search,檢索與正則表達式相匹配的值，返回第一個與正則相匹配的子串的起始位置

   var str="Visit W3School!";
   document.write(str.search(/W3School/)); //6

2. match,找到一個或多個正則表達式的匹配,返回匹配結果的數組。該數組的內容依賴於 regexp 是否具備全局標誌 g。

   var str="1 plus 2 equal 3";
   document.write(str.match(/\d+/g));  //1,2,3

3. replace,用於在字符串中用一些字符替換另外一些字符，或替換一個與正則表達式匹配的子串。返回替換結果。

   text = "javascript Tutorial";
   text.replace(/javascript/i, "JavaScript");      //JavaScript Tutorial
   
   name = "Doe, John";
   name.replace(/(\w+)\s*, \s*(\w+)/, "$2 $1");    //John Doe

4. split,把字符串分割爲字符串數組。

   var str="How are you doing today?"
   document.write(str.split(" ") + "<br />");  //How,are,you,doing,today?
   document.write(str.split(/\s+/) + "<br />");//同上
   document.write(str.split("") + "<br />");   //H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
   document.write(str.split(" ",3));           //How,are,you
   
   var name = 'aaa bbb ccc';
   var uw=name.replace(/\b\w+\b/g, function(word){
       return word.substring(0,1).toUpperCase()+word.substring(1);}
   );
   document.write (uw);        //Aaa Bbb Ccc

參考

---

1. 精通 JS正則表達式 (精通?標題黨)
2. W3School
3. 《 javascript語言精粹 》