JS之正則表達式詳解

時間  2019-11-08
標籤 正則 表達式 詳解 欄目 JavaScript 简体版
原文   原文鏈接

正則表達式很是有用，查找、匹配、處理字符串、替換和轉換字符串，輸入輸出等。下面整理一些經常使用的正則表達式。html

經常使用的正則字符

正則字符 描述
\ 將下一個字符標記爲一個特殊字符、或一個原義字符、或一個 向後引用、或一個八進制轉義符。例如，'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' 範圍內的任意字符。
\b 匹配一個單詞邊界，也就是指單詞和空格間的位置。例如， '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。
\n 匹配一個換行符。等價於 \x0a 和 \cJ。
\r 匹配一個回車符。等價於 \x0d 和 \cM。
\s 匹配任何空白字符，包括空格、製表符、換頁符等等。等價於 [ \f\n\r\t\v]。
\S 匹配任何非空白字符。等價於 [^ \f\n\r\t\v]。
\t 匹配一個製表符。等價於 \x09 和 \cI。
\v 匹配一個垂直製表符。等價於 \x0b 和 \cK。
\w 匹配包括下劃線的任何單詞字符。等價於'[A-Za-z0-9_]'。
\W 匹配任何非單詞字符。等價於 '[^A-Za-z0-9_]'。
\xn 匹配 n，其中 n 爲十六進制轉義值。十六進制轉義值必須爲肯定的兩個數字長。例如，'\x41' 匹配 "A"。'x041' 則等價於 '\x04' & "1"。正則表達式中可使用 ASCII 編碼。
\num 匹配 num，其中 num 是一個正整數。對所獲取的匹配的引用。例如，'(.)\1' 匹配兩個連續的相同字符。
\n 標識一個八進制轉義值或一個向後引用。若是 n 以前至少 n 個獲取的子表達式，則 n 爲向後引用。不然，若是 n 爲八進制數字 (0-7)，則 n 爲一個八進制轉義值。
\nm 標識一個八進制轉義值或一個向後引用。若是 \nm 以前至少有 nm 個得到子表達式，則 nm 爲向後引用。若是 \nm 以前至少有 n 個獲取，則 n 爲一個後跟文字 m 的向後引用。若是前面的條件都不知足，若 n 和 m 均爲八進制數字 (0-7)，則 \nm 將匹配八進制轉義值 nm。
\nml 若是 n 爲八進制數字 (0-3)，且 m 和 l 均爲八進制數字 (0-7)，則匹配八進制轉義值 nml。

RegExp類型

ECMAScript經過RegExp類型支持正則表達式，以下：面試

var expression = /pattern/flags;

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

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

正則表達式定義方式

以字面量的形式來定義正則表達式

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

var pattern = /[bc]at/i;

使用RegExp構造函數

它接收兩個參數：一個是要匹配的字符串模式，另外一個是可選的標誌字符串。可使用字面量定義的任何表達式，均可以使用構造函數來定義，仍是以上面的例子爲例：segmentfault

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表示應用字符串表達式的字符串。
例：this

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}) .表示除\n以外的任意字符，後面加{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]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$

匹配兩個兩個重疊出現的字符 例如，"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 ↩
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程