一篇文章帶你玩轉正則表達式

讀這篇文章以前你須要掌握基本的JavaScript知識，而且有安靜溫馨的環境與寬裕的時間，文章有點長，你能夠選擇備好coffee或茶來慢慢學習。
文章標題有點誇大了，這是一篇正則表達式的入門文章。若有錯誤，歡迎指正。

概念和語法

REGEXP對象

JavaScript 經過內置對象RegExp支持正則表達式，有兩種方法實例化RegExp對象

1.字面量 2.構造函數

字面量

var reg = /\bis\b /g //匹配單詞is g是global 進行全文搜索匹配

沒有g：
  var reg = /\bis\b/;
  //只替換第一項
  'He is a boy. This is a dog. Where is she?'.replace(reg,'IS');
  "He IS a boy. This is a dog. Where is she?"
  有g：
  var reg = /\bis\b/g;
  //替換了全部的
  'He is a boy. This is a dog. Where is she?'.replace(reg,'IS');
  "He IS a boy. This IS a dog. Where IS she?"

構造函數

var reg = new RegExp( '\\bis\\b' , 'g'); //一樣，若是不加g 則只替換第一項

修飾符

g：global 全文搜索，不添加，搜索到第一個匹配中止
i：ignore case 忽略大小寫，默認大小寫敏感
m：multiplelines 多行搜索

//未忽略大小寫
  'He is a boy. Is he?'.replace(/\bis\b/g, '0');
  "He 0 a boy. Is he?"
  //忽略大小寫
  'He is a boy. Is he?'.replace(/\bis\b/gi, '0');
  "He 0 a boy. 0 he?"

元字符

·正則表達式由兩種基本字符類型組成：

• 原義文本字符

• 元字符

·元字符是在正則表達式中有特殊含義的非字母字符

`· * + ? $ ^ . / \ () {} []`

字符類

咱們可使用元字符 [] 來構建一個簡單的類
所謂類是指符合某些特性的對象，一個泛指，而不是特指某個字符
表達式[abc] 把字符a或b或c歸爲一類，表達式能夠匹配這類的字符（one of）

'a1b2c3d4'.replace(/[abc]/g,'X')
  "X1X2X3d4"

字符類取反

使用元字符^建立 反向類/負向類

'a1b2c3d4'.replace(/[^abc]/g,'X')
  "aXbXcXXX"

範圍類

正則表達式還提供了 範圍類
因此咱們可使用 [a-z] 來鏈接兩個字符表示 從a到z的任意字符
這是個閉區間，也就是包含a和z自己

'a1b2d3x4z9'.replace(/[a-z]/g,'Q')
  "Q1Q2Q3Q4Q9"

在[]組成的類內部是能夠連寫的[a-zA-Z] (one of)

'a1b2d3x4z9AJHGK'.replace(/[a-zA-Z]/g,'Q')
  "Q1Q2Q3Q4Q9QQQQQ"

中劃線：若是是在裏面 如[a-z]，就表示範圍的意思，若是想匹配中劃線，在後面加

'2016-09-12'.replace(/[0-9-]/g,'A')
  "AAAAAAAAAA"

預約義類

正則表達式提供 預約義類 來匹配常見的字符類

字符 . 等價類[^\r\n] 除了回車符和換行符以外的全部字符

\d      [0-9]    數字字符
  \D      [^0-9]   非數字字符
  \s 空白符 \S非空白符
  \w 單詞字符（字母、數字下劃線）
  \W 非單詞字符
  ab\d. //ab+數字+任意字符

邊界

正則表達式還提供了幾個經常使用的邊界匹配字符

^ 以xxx開始
  $ 以xxx結束
  \b 單詞邊界
  \B 非單詞邊界

'@123@abc@'.replace(/@./g, 'Q')
  "Q23Qbc@"
  '@123@abc@'.replace(/^@./g, 'Q')
  "Q23@abc@"
  '@123@abc@'.replace(/.@/g, 'Q')
  "@12QabQ"
  '@123@abc@'.replace(/.@$/g, 'Q')
  "@123@abQ"

量詞

咱們但願匹配一個連續出現20次數字的字符串

+ 出現一次或屢次（至少出現一次）
* 出現零次或屢次（任意次）
{n} 出現n次
{n,m}出現n到m次
{n,}至少出現n次

貪婪模式

d{3,6} 12345678

//儘量多的匹配
  '12345678'.replace(/\d{3,6}/g,'X')
  "X78"

非貪婪模式

讓正則表達式儘量少的匹配，也就是說一旦成功匹配再也不繼續嘗試就是非貪婪模式

//在量詞後加上？便可 以下面的爲3個一組
  '12345678'.replace(/\d{3,6}?/g,'X')
  "XX78"

分組

匹配字符串Byron連續出現3次的場景
Byron{3} 只是將n重複三次
使用()能夠達到分組的功能，使量詞做用於分組
(Byron){3} 是將Byron重複三次

//錯誤的
  'a1b2c3d4'.replace(/[a-z]\d{3}/g,'X')
  "a1b2c3d4"
  //正確的
  'a1b2c3d4'.replace(/([a-z]\d){3}/g,'X')
  "Xd4"

或

使用 | 能夠達到或的效果

//示例一
  'ByronCasper'.replace(/Byron|Casper/g,'X')
  "XX"
  //示例二(分組和或配合使用)
  'ByronsperByrCasper'.replace(/Byr(on|Ca)sper/g,'X')
  "XX"

反向引用

2016-08-12 => 08/12/2016

//分組捕獲
  '2016-08-12'.replace(/(\d{4})-(\d{2})-(\d{2})/g,'$1')
  "2016"
  '2016-08-12'.replace(/(\d{4})-(\d{2})-(\d{2})/g,'$2/$3/$1')
  "08/12/2016"

忽略分組

不但願捕獲某些分組，只須要在分組內加上？：就能夠
(?:Byron).(ok)

前瞻

正則表達式從文本頭部向尾部開始解析，文本尾部方向，稱爲「前」
前瞻就是在正則表達式匹配到規則的時候，向前檢查是否符合斷言，
後顧/後瞻方向相反

正向前瞻 exp(?=assert)
負向前瞻 exp(?!assert)

//單詞後面是數字
  'a2*3'.replace(/\w(?=\d)/g,'X')
  "X2*3"
  'a2*34v8'.replace(/\w(?=\d)/g,'X')
  "X2*X4X8"
  //單詞後面不是數字
  'a2*34vv'.replace(/\w(?!\d)/g,'X')
  "aX*3XXX"

對象屬性

對象屬性是隻讀的

global：是否全文搜索，默認false
ignore case：是否大小寫敏感，默認是false
multiline：多行搜索，默認值是false
lastIndex：是當前表達式匹配內容的最後一個字符的下一個位置
source：正則表達式的文本字符串

test和exec方法

RegExp.prototype.test(str)
用於測試字符串參數中是否存在匹配正則表達式模式的字符串
若是存在則返回true，不然返回false

var reg1 = /\w/;
  reg1.test('a')
  true
  reg1.test('$')
  false

  可是若是這樣：
  var reg2 = /\w/g;
  //第一次
  reg1.test('ab')
  true
  //第二次
  reg1.test('ab')
  true
  //第三次
  reg1.test('ab')
  false

這是lastIndex在做怪！
第一次匹配的時候當前匹配內容爲a，最後一個字符也是a自己，下一個位置爲b前面；
第二次匹配的時候當前匹配內容爲b，最後一個字符也是b自己，下一個位置爲b後面；
第三次匹配的時候當前匹配內容爲空，最後一個字符也是空自己，下一個位置重置爲a前面。

解決方法：
①每次都實例化一個新對象

(/\w/g).test('ab') 這樣就能每次都是true，可是會產生內存開銷，不採用！

②若是想用test本意的話，不用加g，只需檢測有沒有就能夠了。

RegExp.prototype.exec(str)
使用正則表達式模式對字符串執行搜索，並將更新全局RegExp對象的屬性以反映匹配結果

若是沒有匹配的文本則返回null，不然返回一個結果數組：
- index 聲明匹配文本的第一個字符的位置
- input 存放被檢索的字符串 string

非全局調用

調用非全局的RegExp對象的exec()時，返回數組
第一個元素是與正則表達式相匹配的文本
第二個元素是與RegExpObject的第一個子表達式相匹配的文本（若是有的話）
第三個元素是與RegExp對象的第二個子表達式相匹配的文本（若是有的話），以此類推

var reg3 = /\d(\w)(\w)\d/;
  var reg4 = /\d(\w)(\w)\d/g;
  var ts = '$1az2bb3cy4dd5ee';

  var ret = reg3.exec(ts);
  //在非全局下 lastIndex失效
  console.log(reg3.lastIndex + '\t' + ret.index + '\t' + ret.toString());

  console.log(reg3.lastIndex + '\t' + ret.index + '\t' + ret.toString());

  while(ret = reg4.exec(ts)){
     console.log(reg4.lastIndex + '\t' + ret.index + '\t' + ret.toString());
  }
  //結果：
  "0  1 1az2,a,z"
  "0  1 1az2,a,z"
  "5  1 1az2,a,z"
  "11 7 3cy4,c,y"

字符串對象方法

Stringl.protatype.search(reg)
search()方法用於檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串
方法返回第一個匹配結果index，查找不到返回 -1
search()方法不執行全局匹配，它將忽略標誌g，而且老是從字符串的開始進行檢索

String.prototype.match(reg)
match()方法將檢索字符串，以找到一個或多個與regexp匹配的文本
regexp是否具備標誌g對結果影響很大
非全局調用
若是regexp沒有標誌g，那麼match()方法就只能在字符串中執行一次匹配
若是沒有找到任何匹配的文本，將返回null
不然它將返回一個數組，其中存放了與它找到的匹配文本有關的信息

返回數組的第一個元素存放的是匹配文本，而其他的元素存放的是與正則表達式的子表達式匹配的文本
除了常規的數組元素以外，返回的數組還含有2個對象屬性

• index 聲明匹配文本的起始字符在字符串的位置

• input 聲明對stringObject的引用

var reg3 = /\d(\w)\d/;
      var reg4 = /\d(\w)\d/g;
      var ts = '$1a2b3c4d5e';

      var ret = ts.match(reg3);

      console.log(ret);
      console.log(ret.index + '\t' + reg3.lastIndex);

      //結果
      ["1a2", "a"]
      "1  0"

全局調用
若是regexp具備標誌g則match()方法將執行全局檢索，找到字符串中的全部匹配字符串
沒有找到任何匹配的子串，則返回null
若是找到了一個或多個匹配子串，則返回一個數組
數組元素中存放的是字符串中全部的匹配子串，並且也沒有index屬性或input屬性

ret = ts.match(reg4);
      console.log(ret);
      console.log(ret.index + '\t' + reg3.lastIndex);

      //結果
      ["1a2", "3c4"]
      "undefined  0"

String.prototype.split(reg)
咱們常用split方法把字符串分割爲字符數組
'a,b,c,d'.split(','); //["a","b","c","d"]
在一些複雜的分割狀況下咱們可使用正則表達式解決
'a1b2c3d'.split(/\d/); //["a","b","c","d"]

String.prototype.replace

String.prototype.replace(str,replaceStr)
String.prototype.replace(reg,replaceStr)
String.prototype.replace(reg,function)

function參數含義

function會在每次匹配替換的時候調用，有四個參數
①匹配字符串
②正則表達式分組內容，沒有分組則沒有該參數
③匹配項在字符串中的index
④原字符串

'a1b2c3d4e5'.replace(/\d/g, function(match,index,origin){
      console.log(index);
      return parseInt(match) + 1;
    });
    //結果
    1
    3
    5
    7
    9
    "a2b3c4d5e6"

    'a1b2c3d4e5'.replace(/(\d)(\w)(\d)/g, function(match,group1,group2,group3,index,origin){
      console.log(match);
      return group1 + group3;
    });
    //結果
    "1b2"
    "3d4"
    "a12c34e5"

但願能對你有所幫助，更好的運用正則來解決問題！
附：

1.正則表達式檢測網站：(https://regexper.com/)
2.JSBin：(http://jsbin.com/?js,console)

博客地址：(http://fehey.com/2016/08/12/r... ) 歡迎前端小夥伴交流~