JS之正規表示式詳解

前端筆記屋發表於2017-09-21
JS

正規表示式非常有用，查詢、匹配、處理字串、替換和轉換字串，輸入輸出等。下面整理一些常用的正規表示式。

常用的正則字元

正則字元 描述
將下一個字元標記為一個特殊字元、或一個原義字元、或一個 向後引用、或一個八進位制轉義符。例如，`n` 匹配字元 “n”。`n` 匹配一個換行符。序列 “ 匹配 “” 而 “(” 則匹配 “(“。
^ 匹配輸入字串的開始位置。如果設定了 RegExp 物件的 Multiline 屬性，^ 也匹配 `n` 或 `r` 之後的位置。
$ 匹配輸入字串的結束位置。如果設定了RegExp 物件的 Multiline 屬性，$ 也匹配 `n` 或 `r` 之前的位置。
* 匹配前面的子表示式零次或多次。例如，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?`。請注意在逗號和兩個數之間不能有空格。
? 當該字元緊跟在任何一個其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 後面時，匹配模式是非貪婪的。非貪婪模式儘可能少的匹配所搜尋的字串，而預設的貪婪模式則儘可能多的匹配所搜尋的字串。例如，對於字串 “oooo”，`o+?` 將匹配單個 “o”，而 `o+` 將匹配所有 `o`。
· 匹配除 “n” 之外的任何單個字元。要匹配包括 `n` 在內的任何字元，請使用象 `[.n]` 的模式。
(pattern) 匹配 pattern 並獲取這一匹配。所獲取的匹配可以從產生的 Matches 集合得到，在VBScript 中使用 SubMatches 集合，在JScript 中則使用 $0…$9 屬性。要匹配圓括號字元，請使用 `(` 或 `)`。
(?:pattern) 匹配 pattern 但不獲取匹配結果，也就是說這是一個非獲取匹配，不進行儲存供以後使用。這在使用 “或” 字元 (|) 來組合一個模式的各個部分是很有用。例如， `industr(?:y|ies) 就是一個比 `industry|industries` 更簡略的表示式。
(?=pattern) 正向預查，在任何匹配 pattern 的字串開始處匹配查詢字串。這是一個非獲取匹配，也就是說，該匹配不需要獲取供以後使用。例如，`Windows (?=95|98|NT|2000)` 能匹配 “Windows 2000” 中的 “Windows” ，但不能匹配 “Windows 3.1” 中的 “Windows”。預查不消耗字元，也就是說，在一個匹配發生後，在最後一次匹配之後立即開始下一次匹配的搜尋，而不是從包含預查的字元之後開始。
(?!pattern) 負向預查，在任何不匹配 pattern 的字串開始處匹配查詢字串。這是一個非獲取匹配，也就是說，該匹配不需要獲取供以後使用。例如`Windows (?!95|98|NT|2000)` 能匹配 “Windows 3.1” 中的 “Windows”，但不能匹配 “Windows 2000” 中的 “Windows”。預查不消耗字元，也就是說，在一個匹配發生後，在最後一次匹配之後立即開始下一次匹配的搜尋，而不是從包含預查的字元之後開始
x|y 匹配 x 或 y。例如，`z|food` 能匹配 “z” 或 “food”。`(z|f)ood` 則匹配 “zood” 或 “food”。
[xyz] 字符集合。匹配所包含的任意一個字元。例如， `[abc]` 可以匹配 “plain” 中的 `a`。
[^xyz] 負值字符集合。匹配未包含的任意字元。例如， `[^abc]` 可以匹配 “plain” 中的`p`。
[a-z] 字元範圍。匹配指定範圍內的任意字元。例如，`[a-z]` 可以匹配 `a` 到 `z` 範圍內的任意小寫字母字元。
[^a-z] 負值字元範圍。匹配任何不在指定範圍內的任意字元。例如，`[^a-z]` 可以匹配任何不在 `a` 到 `z` 範圍內的任意字元。
匹配一個單詞邊界，也就是指單詞和空格間的位置。例如， `erb` 可以匹配”never” 中的 `er`，但不能匹配 “verb” 中的 `er`。
B 匹配非單詞邊界。`erB` 能匹配 “verb” 中的 `er`，但不能匹配 “never” 中的 `er`。
cx 匹配由 x 指明的控制字元。例如， cM 匹配一個 Control-M 或回車符。x 的值必須為 A-Z 或 a-z 之一。否則，將 c 視為一個原義的 `c` 字元。
d 匹配一個數字字元。等價於 [0-9]。
D 匹配一個非數字字元。等價於 [^0-9]。
f 匹配一個換頁符。等價於 x0c 和 cL。

匹配一個換行符。等價於 x0a 和 cJ。

匹配一個回車符。等價於 x0d 和 cM。
s 匹配任何空白字元，包括空格、製表符、換頁符等等。等價於 [ f

v]

。
S 匹配任何非空白字元。等價於 [^ f

v]

。
匹配一個製表符。等價於 x09 和 cI。
v 匹配一個垂直製表符。等價於 x0b 和 cK。
w 匹配包括下劃線的任何單詞字元。等價於`[A-Za-z0-9_]`。
W 匹配任何非單詞字元。等價於 `[^A-Za-z0-9_]`。
xn 匹配 n，其中 n 為十六進位制轉義值。十六進位制轉義值必須為確定的兩個數字長。例如，`x41` 匹配 “A“。`x041` 則等價於 `x04` & “1“。正規表示式中可以使用 ASCII 編碼。

um		 匹配 num，其中 num 是一個正整數。對所獲取的匹配的引用。例如，`(.)1` 匹配兩個連續的相同字元。

標識一個八進位制轉義值或一個向後引用。如果 n 之前至少 n 個獲取的子表示式，則 n 為向後引用。否則，如果 n 為八進位制數字 (0-7)，則 n 為一個八進位制轉義值。

m		 標識一個八進位制轉義值或一個向後引用。如果
m 之前至少有 nm 個獲得子表示式，則 nm 為向後引用。如果
m 之前至少有 n 個獲取，則 n 為一個後跟文字 m 的向後引用。如果前面的條件都不滿足，若 n 和 m 均為八進位制數字 (0-7)，則
m 將匹配八進位制轉義值 nm。

ml		 如果 n 為八進位制數字 (0-3)，且 m 和 l 均為八進位制數字 (0-7)，則匹配八進位制轉義值 nml。

RegExp型別

ECMAScript通過RegExp型別支援正規表示式，如下：

var expression = /pattern/flags;

其中的模式（pattern）部分可以是任何簡單或者複雜的正規表示式，可以包含字元類、限定符、分組、向前查詢以及反向引用。每個正規表示式可帶有一個或者多個標註（flags）,用以標明正規表示式的行為。有三個一下標誌：

  • g：表示全域性模式,即模式將被應用到所有字串，而非在發現第一個匹配項時立即停止。
  • i：表示不區分大小寫模式。
  • m：表示多行模式，即在到達一行文字末尾時還在繼續查詢下一行中是否存在於模式匹配的項。

正規表示式定義方式

以字面量的形式來定義正規表示式

例如：匹配第一個bat或者cat,不區分大小寫

var pattern = /[bc]at/i;

使用RegExp建構函式

它接收兩個引數：一個是要匹配的字串模式，另一個是可選的標誌字串。可以使用字面量定義的任何表示式，都可以使用建構函式來定義，還是以上面的例子為例：

var pattern = new RegExp("[bc]at","i");

注意:RegExp建構函式模式引數時字串，所以再某些情況下要對字元進項雙重轉義。所有元字元都必須雙重轉義，如字面量模式為/[bc]at/,那麼等價的字串為"/\[bc\]at/"

例子：

var re = null,
    i;
    for(i=0; i < 10; i++){
        re = /cat/g;
        console.log(re.test("catastrophe"));
    }
    for(i=0; i < 10; i++){
        re = new RegExp("cat","g");
        console.log(re.test("catastrophe"));
    }

列印結果都為10個true

正規表示式方法

RegExp物件的exec()方法

該方法是專門為捕獲組而設計的，其接受一個引數，即要應用模式的字串，然後返回包含第一個匹配項資訊的陣列；或者在沒有匹配項的情況下返回null。返回的陣列雖然是Array的例項，但是包含兩個額外的屬性：index和input。其中index表示匹配項在字串中的位置，而input表示應用字串表示式的字串。
例：

var text = "mom and dad and baby";
var pattern = /mom( and dad( and baby)?)?/gi;
var matches = pattern.exec(text);
console.log(matches.index); //0
console.log(matches.input); //mom and dad and baby
console.log(matches[0]);    //mom and dad and baby
console.log(matches[1]);    //and dad and baby
console.log(matches[2]);    //and baby

對於exec()方法而言，即使在模式中設定了全域性標誌g，它每次也只是返回一個匹配項。在不設定全域性標誌的情況下，在同一個字串上多次呼叫exec()方法將始終返回第一個匹配項的資訊。而在設定全域性標誌的情況下，每次呼叫exec()則都會在字串中繼續查詢新匹配項，如下例子：

var text = "cat, bat, sat, fat";
var pattern1 = /.at/;

var matches = pattern1.exec(text);
console.log(matches.index); //0
console.log(matches[0]);  //cat
console.log(pattern1.lastIndex); //0

matches = pattern1.exec(text);
console.log(matches.index); //0
console.log(matches[0]);  //cat
console.log(pattern1.lastIndex); //0

var pattern2 = /.at/g;

var matches = pattern2.exec(text);
console.log(matches.index); //0
console.log(matches[0]);  //cat
console.log(pattern2.lastIndex); //3

var matches = pattern2.exec(text);
console.log(matches.index); //5
console.log(matches[0]);  //bat
console.log(pattern2.lastIndex); //8

注意：IE的JavaScript實現lastIndex屬性上存在偏差，即使在非全域性模式下，lastIndex屬性每次也都在變化。

test()方法

正規表示式常用方法test()，它接受一個字串引數。在模式與該引數匹配的情況下返回true，否則返回false。

用法：正則.test(字串)

例1：判斷是否是數字

var str = `374829348791`;
var re = /D/;      //  D代表非數字
if( re.test(str) ){   // 返回true,代表在字串中找到了非數字。
    alert(`不全是數字`);
}else{
    alert(`全是數字`);
}

例2：

var text ="000-00-0000";
var pattern = /d{3}-d{2}-d{4}/;
if(pattern.test(text)){
    console.log(`the pattern was matched.`);
}

search()方法

在字串搜尋符合正則的內容，搜尋到就返回出現的位置（從0開始，如果匹配的不只是一個字母，那隻會返回第一個字母的位置）， 如果搜尋失敗就返回 -1

用法：字串.search(正則)

例子：在字串中找字母b，且不區分大小寫

var str = `abcdef`;
var re = /B/i;
//var re = new RegExp(`B`,`i`); 也可以這樣寫
alert( str.search(re) ); // 1

match方法

獲取正則匹配到的結果，以陣列的形式返回

用法： 字串.match(正則)

例如：

"186a619b28".match(/d+/g); // ["186","619","28"]

replace方法

replace 本身是JavaScript字串物件的一個方法，它允許接收兩個引數：

replace([RegExp|String],[String|Function])
第1個引數可以是一個普通的字串或是一個正規表示式.
第2個引數可以是一個普通的字串或是一個回撥函式.

如果第2個引數是回撥函式，每匹配到一個結果就回撥一次，每次回撥都會傳遞以下引數：

  • result: 本次匹配到的結果
  • $1,…$9: 正規表示式中有幾個()，就會傳遞幾個引數，$1~$9分別代表本次匹配中每個()提取的結果，最多9個
  • offset:記錄本次匹配的開始位置
  • source:接受匹配的原始字串

以下是replace和JS正則搭配使用的幾個常見經典案例：

（1）實現字串的trim函式，去除字串兩邊的空格

String.prototype.trim = function(){
 
  //方式一：將匹配到的每一個結果都用""替換
  return this.replace(/(^s+)|(s+$)/g,function(){
    return "";
  });
 
  //方式二：和方式一的原理相同
  return this.replace(/(^s+)|(s+$)/g,``);
};

^s+ 表示以空格開頭的連續空白字元，s+$ 表示以空格結尾的連續空白字元，加上() 就是將匹配到的結果提取出來，由於是 | 的關係，因此這個表示式最多會match到兩個結果集，然後執行兩次替換：

String.prototype.trim = function(){
  /**
   * @param rs：匹配結果
   * @param $1:第1個()提取結果
   * @param $2:第2個()提取結果
   * @param offset:匹配開始位置
   * @param source：原始字串
   */
  this.replace(/(^s+)|(s+$)/g,function(rs,$1,$2,offset,source){
    //arguments中的每個元素對應一個引數
    console.log(arguments);
  });
};
 
" abcd ".trim();

輸出結果：

[" ", " ", undefined, 0, " abcd "] //第1次匹配結果
[" ", undefined, " ", 5, " abcd "] //第2次匹配結果

（2）提取瀏覽器url中的引數名和引數值，生成一個key/value的物件

function getUrlParamObj(){
  var obj = {};
  //獲取url的引數部分
  var params = window.location.search.substr(1);
  //[^&=]+ 表示不含&或=的連續字元，加上()就是提取對應字串
  params.replace(/([^&=]+)=([^&=]*)/gi,function(rs,$1,$2){
    obj[$1] = $2;
  });
 
  return obj;
}

/([^&=]+)=([^&=]*)/gi 每次匹配到的都是一個完整key/value,形如 xxxx=xxx, 每當匹配到一個這樣的結果時就執行回撥，並傳遞匹配到的key和value，對應到$1和$2

（3）在字串指定位置插入新字串

String.prototype.insetAt = function(str,offset){
 
  //使用RegExp()建構函式建立正規表示式
  var regx = new RegExp("(.{"+offset+"})");
 
  return this.replace(regx,"$1"+str);
};
 
"abcd".insetAt(`xyz`,2); //在b和c之間插入xyz
//結果 "abxyzcd"

當offset=2時，正規表示式為：(^.{2}) .表示除
之外的任意字元，後面加{2} 就是匹配以數字或字母組成的前兩個連續字元，加()就會將匹配到的結果提取出來，然後通過replace將匹配到的結果替換為新的字串，形如：結果=結果+str

（4） 將手機號12988886666轉化成129 8888 6666

function telFormat(tel){
 
  tel = String(tel);
 
  //方式一
  return tel.replace(/(d{3})(d{4})(d{4})/,function (rs,$1,$2,$3){
    return $1+" "+$2+" "+$3
  });
 
  //方式二
  return tel.replace(/(d{3})(d{4})(d{4})/,"$1 $2 $3");
}

(d{3}d{4}d{4}) 可以匹配完整的手機號，並分別提取前3位、4-7位和8-11位，"$1 $2 $3" 是在三個結果集中間加空格組成新的字串，然後替換完整的手機號。

常用例項

匹配第一個bat或者cat,不區分大小寫： /[bc]at/i 或者 new RegExp("[bc]at","i");

匹配所有以”at”結尾的3個字元組合，不區分大小寫：/.at/gi;

只能輸入數字：^[0-9]*$;

只能輸入n位的數字：^d{n}$

只能輸入至少n位的數字：^d{n,}$

只能輸入m~n位的數字：^d{m,n}$

只能輸入零和非零開頭的數字：^(0|[1-9][0-9]*)$

只能輸入有兩位小數的正實數：^[0-9]+(.[0-9]{2})?$

只能輸入有1~3位小數的正實數：^[0-9]+(.[0-9]{1,3})?$

只能輸入非零的正整數：^+?[1-9][0-9]*$

只能輸入長度為3的字元：^.{3}$

只能輸入由26個英文字母組成的字串：^[A-Za-z]+$

只能輸入由數字和26個英文字母組成的字串：^[A-Za-z0-9]+$

只能輸入由數字、26個英文字母或者下劃線組成的字串：^w+$

驗證使用者密碼：以字母開頭，長度在6~18之間，只能包含字元、數字和下劃線：^[a-zA-Z]w{5,17}$

驗證是否含有^%&`,;=?$”等字元：[^%&`,;=?$x22]+

只能輸入漢字：^[u4e00-u9fa5]{0,}$

驗證Email地址：^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$

驗證InternetURL：^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$

驗證身份證號（15位或18位數字）：^d{15}|d{18}$

驗證IP地址：^((2[0-4]d|25[0-5]|[01]?dd?).){3}(2[0-4]d|25[0-5]|[01]?dd?)$

匹配兩個兩個重疊出現的字元 例如，”aabbc11asd”， 返回結果為aa bb 11三組match：(w)1

匹配成對的HTML標籤：<(?<tag>[^s>]+)[^>]*>.*</k<tag>>

匹配1-58之間的數字：/^([1-9]|[1-5][0-8])$/

匹配 -90至90之間的整數（包括-90和90）：^(-?[1-8][0-9]|-?[1-9]|-?90|0)$
匹配收尾空白字元：^s+|s+$
中文，全形，半形匹配：

str="中文;；ａ"    
  alert(str.match(/[u0000-u00ff]/g))     //半形  
  alert(str.match(/[u4e00-u9fa5]/g))     //中文  
  alert(str.match(/[uff00-uffff]/g))     //全形

找重複項最多的字元個數：

var str = `assssjdssskssalsssdkjsssdss`;

var arr = str.split(``); //把字串轉換為陣列
str = arr.sort().join(``); //首先進行排序，這樣結果會把相同的字元放在一起，然後再轉換為字串
//alert(str);  // aaddjjkklsssssssssssssssss

 var value = ``;
 var index = 0; 
var re = /(w)1+/g;  //匹配字元，且重複這個字元，重複次數至少一次。
str.replace(re,function($0,$1){ 
   //alert($0);   代表每次匹配成功的結果 : aa dd jj kk l sssssssssssssssss
     //alert($1);  代表每次匹配成功的第一個子項，也就是w:  a d j k l S 
　　
    if(index<$0.length){  //如果index儲存的值小於$0的長度就進行下面的操作
          index = $0.length;  // 這樣index一直儲存的就在最大的長度
           value = $1;  //value儲存的是出現最多的這個字元
    }

}); 

alert(`最多的字元:`+value+`,重複的次數:`+index);  // s   17

判斷是不是QQ號：
//^ : 放在正則的最開始位置，就代表起始的意思，注意 /1 / 和 /^[a]/是不一樣的，前者是排除的意思，後者是代表首位。

//$ : 正則的最後位置 , 就代表結束的意思

//首先想QQ號的規則 
      1 首位不能是0 
      2 必須是 5-12位的數字
   
    var aInput = document.getElementsByTagName(`input`);
    var re = /^[1-9]d{4,11}$/;
    //123456abc為了防止出現這樣的情況，所以必須限制最後
    //首位是0-9，接著是4-11位的數字型別。
aInput[1].onclick = function(){
    if( re.test(aInput[0].value) ){
        alert(`是QQ號`);
    }else{
        alert(`不是QQ號`);
    }

};

去掉前後空格（面試題經常出現）：

var str = `  hello  `;
alert( `(`+trim(str)+`)` );//為了看出區別所以加的括號。 (hello)
function trim(str){
   var re = /^s+|s+$/g; // |代表或者   s代表空格  +至少一個    前面有至少一個空格 或者後面有至少一個空格 且全域性匹配
  return str.replace(re,``); //把空格替換成空
}

常用的一些表單校驗：

匹配中文：[u4e00-u9fa5] //中文ACALL碼的範圍
行首行尾空格：^s*|s*$ //首行出現任意個空格或者尾行出現任意個空格（任意表示也可以沒有空格）

Email：^w+@[a-z0-9]+(.[a-z]+){1,3}$  
      //起始至少為一個字元(w字母，數字或者下劃線)，然後匹配@,接著為任意個字母或者數字，.代表真正的點，.後面為至少一個的字元（a-z）,同時這個(比如.com)整體為一個子項作為結束，可以出現1-3次。因為有的郵箱是這樣的.cn.net。（xxxx.@qq.com xxxx.@163.com xxxx.@16.cn.net ）

網址：[a-zA-z]+://[^s]*   http://......
  //匹配不分大小寫的任意字母，接著是//,後面是非空格的任意字元

郵政編碼：[1-9]d{5}  //起始數字不能為0，然後是5個數字
身份證：[1-9]d{14}|[1-9]d{17}|[1-9]d{16}x

可參考地址：
精通 JS正規表示式
精通正規表示式- 讀書筆記
過目不忘JS正規表示式

  1. a ↩

相關文章