手摸手從小白到精通正則（略長）

什麼是正則表達式

什麼是正則表達式？在我剛入行的時候，可能就膚淺地認爲它能夠經過一堆奇奇怪怪的字符進行校驗，每當有「複雜」的校驗時就會去搜索對應的正則，ctrl c 和ctrl v一鼓作氣。可是正則的應用不只僅侷限於簡單的校驗，如今先來全面地看下正則表達式。

概念

正則表達式是對字符串操做的一種匹配模式，它由字符和元字符組成，而後對目標字符串進行匹配。

核心：匹配

從上面的概念能夠看出正則表達式的核心就是匹配。

• 匹配什麼？ 匹配目標字符串中對應的字符和位置。這句話灰常重要，必定要有這個意識，這對咱們後面的學習會頗有幫助。

• 匹配了能作什麼？

  • 校驗：也是咱們最經常使用到的，匹配到則存在。
  • 提取：當匹配到對應的字符時，能夠將其提取出來以做他用。
  • 替換：當匹配到對應的字符時，能夠將其替換爲咱們想要的(例如：使用replace方法)，以此實現增刪改功能。

總結

正則表達式是由字符和元字符組成的表達式，它能對目標字符串裏的字符和位置進行匹配，並能對其進行校驗，提取和替換。

入門正則匹配

大部分程序語言都是支持正則的，但做爲一個前端，這裏就主要以JS裏的正則進行講解。

Tip：下面咱們將正式進入正則表達式的編寫環節。這裏建議能夠經過這個網站https://jex.im/regulex 來對本身的正則表達式進行分析，可視化地輔助編寫。爲了鞏固你們的學習成果，強烈建議能夠搭配經常使用正則表達式，進行學習。

建立正則表達式

在JavaScript中，你可使用如下兩種方法來構建正則表達式：

• 1，使用正則表達式字面量，其由包含在斜槓之間的模式組成，栗子：

  const regex = /shotCat/;
  複製代碼

• 2，使用RegExp對象的構造函數，栗子：

  const regex = new RegExp('shotCat');
  複製代碼

上面兩種寫法是等價的，都是僅僅只能匹配shotCat。它們的主要區別是，第一種方法是在編譯時建立正則表達式，第二種方法則是在運行時建立正則表達式。

注意： 不推薦第二種使用RegExp對象的構造函數，由於用構造函數會多寫不少 \，很是不適合閱讀，也不適合本身編寫。

字符和元字符

從上一章的概念能夠知道，正則表達式是由字符和元字符組成的。

• 字符：就是計算機字符編碼，例如：咱們常見 數字、英文字母 等。
• 元字符： 這個是咱們要說的重點。元字符也被稱爲特殊字符。是一些用來表示特殊語義的字符。如\d表示0到9的數字。

正則裏的元字符很是多很雜，不利於記憶理解。後面我會按常見使用對其進行分類講解。若是你想查看全部的元字符能夠查看 這裏

匹配模式

前面說過正則表達式的核心就是匹配。

在正則裏，匹配模式能夠簡單分爲：

• 準確匹配：有時也稱爲簡單匹配。由簡單的數字和字母字符組成，沒有元字符，純粹就是一一對應的關係。例如：/shotcat/ 就只能匹配到 shotcat
• 模糊匹配：由元字符組成，能夠匹配複雜的多個字符。例如：/^[0-9]*$/ 則能夠匹配全部的數字。模糊匹配也分爲兩種：匹配的字符有多種可能和字符出現的次數有多種可能。
  • 縱向模糊匹配：正則匹配字符時，若是這個字符，不是惟一的，它能夠是a，也能夠是b，甚至更多其餘可能中的一個。這種狀況就被稱爲縱向模糊匹配。即須要匹配的字符不肯定，存在多種可能。爲何叫縱向，舉個栗子：咱們用手機設置時間時，數字選擇時都會有一個縱向的滾輪讓你選擇，其實都是一個意思，縱向表示有多種可能。
  • 橫向模糊匹配：正則匹配字符時，若是這個字符不是隻出現一次，它可能出現屢次，甚至最少幾回，最多幾回。種狀況就被稱爲橫向模糊匹配。即須要匹配的字符重複次數不肯定，存在多種可能。爲何叫橫向，很簡單，由於重複次數會有不少，橫向長度就會拉長。

其實等你熟練了以後，其實不必記得這麼多模式，這裏細分出來，爲的是你們剛開始學習的時候方便記憶，尤爲是對應的元字符的記憶。

正則表達式的方法

在正式學習元字符以前，先熟悉下正則表達式可使用的方法，方便你們後面理解元字符的例子。

正則表達式能夠被用於 RegExp 的 exec 和 test 方法以及 String 的 match、replace、search 和 split 方法。

來一張全家福表格：

方法	描述
exec	一個在字符串中執行查找匹配的RegExp方法，它返回一個數組（未匹配到則返回 null）。
test	一個在字符串中測試是否匹配的RegExp方法，它返回 true 或 false。
match	一個在字符串中執行查找匹配的String方法，它返回一個數組，在未匹配到時會返回 null。
matchAll	一個在字符串中執行查找全部匹配的String方法，它返回一個迭代器（iterator）。
search	一個在字符串中測試匹配的String方法，它返回匹配到的位置索引，或者在失敗時返回-1。
replace	一個在字符串中執行查找匹配的String方法，而且使用替換字符串替換掉匹配到的子字符串。
split	一個使用正則表達式或者一個固定字符串分隔一個字符串，並將分隔後的子字符串存儲到數組中的 String 方法。

前面說過，正則能夠幫助咱們對字符進行校驗，提取，替換。下面就按這三種功能，將對應的方法進行分類：

• 校驗：
  • test：RegExp方法，校驗成功則返回 true 不然返回 false。也是最經常使用的校驗方法。

    var regex = /shotcat/
    var result = re.test('my name is shotcat')
    console.log(result)
    // => true
    複製代碼

  • search：RegExp方法，校驗成功則返回匹配到的位置索引，失敗則返回-1。

    var regex = /shotcat/
    var string = "my name is shotcat";
    var result = string.search(re)
    console.log( result );
    // => 11 若是失敗則返回-1
    複製代碼

• 提取：
  • exec：RegExp方法，返回一個數組，其中存放匹配的結果。若是未找到匹配，則返回值爲 null。

    var regex = /shotcat/;
    var string = "my name is shotcat";
    var result = regex.exec(string); 
    console.log(result)
    // => ["shotcat", index: 11, input: "my name is shotcat", groups: undefined]
    複製代碼

  • match：String方法，返回一個數組，其中存放匹配的結果。若是未找到匹配，則返回值爲 null。

    var regex = /shotcat/
    var string = "my name is shotcat";
    var result = string.match(regex)
    console.log( result );
    // => ["shotcat", index: 11, input: "my name is shotcat", groups: undefined]
    複製代碼

• 替換：
  • replace：String方法，使用提供的字符串替換掉匹配到的字符串。

    var regex = /shotcat/;
    var string = "my name is shotcat";
    var result = string.replace(regex, '彭于晏'); 
    console.log(result)
    // => ["shotcat", index: 11, input: "my name is shotcat", groups: undefined]
    複製代碼

注意： 這裏只是簡單介紹了相關方法的使用，在最後」相關api使用注意「章節中會詳細說明這些方法的注意點和坑。

元字符--字符集合 [abc]

栗子：正則/a[bcd]e/能夠接受的匹配到結果有abe,ace,ade三種狀況。其中[bcd]就被稱爲字符集合。它用方括號 [ ]表示。

字符集合用來匹配一個字符，該字符多是方括號中的任何一個字符。栗子：正則/a[bcd]e/表示字符a和e之間的這一個字符只能是[]裏面的b或c或d。

表示範圍 [a-z]

若是在字符集合裏有多個字符，且具備必定順序的狀況下，咱們可使用破折號（-）來指定一個字符範圍。例如：用/[a-z]/則能夠匹配從a到z的全部英文小寫字母。再例如：[123456abcdefGHIJKLM]，能夠寫成[1-6a-fG-M]。用連字符-來省略和簡寫。

反向字符集 [^abc]

當你在字符集合的第一位加上^（脫字符），表示反向的意思，即它匹配任何沒有包含在方括號中的字符。例如[^abc]則匹配任何不是a或b或c的字符。注意：[^abc] 和[^a-c] 意思是同樣的。

元字符--匹配單個字符

通常狀況下匹配單個字符直接寫出來就好了，可是若是須要匹配一些特殊字符，例如：空格，製表符，回車，換行等。這個時候就須要經過轉義符來搭配進行使用，詳見下表：

特殊字符	正則表達式	記憶方式
換行符	\n	new line
換頁符	\f	form feed
回車符	\r	return
空白符	\s	space
製表符	\t	tab
垂直製表符	\v	vertical tab
回退符	[\b]	backspace,之因此使用[]符號是避免和\b重複

元字符--同時匹配多個字符

在正則裏若是咱們要匹配多個字符能夠用到[]或者[0-9]這種形式，可是這樣仍然不夠簡潔。因此就有了下表中更加簡潔高效的寫法來匹配多個字符。

匹配區間	正則表達式	記憶方式
除了換行符以外的任何字符	.	句號,除了句子結束符
單個數字, [0-9]	\d	digit
除了[0-9]	\D	not digit
包括下劃線在內的單個字符，[A-Za-z0-9_]	\w	word
非單字字符	\W	not word
匹配空白字符,包括空格、製表符、換頁符和換行符	\s	space
匹配非空白字符	\S	not space

元字符--量詞{m,n}

在匹配時，匹配到的字符常常會出現重複的狀況，這時就須要經過量詞對次數進行限制。

{m,n}形式

{m,n}是最多見最基礎的量詞形式，m 和 n 都是整數。匹配前面的字符至少m次，最多n次。

栗子：/a{1, 3}/表示a出現的次數最少一次，最多3次。 因此它並不匹配shotct中的任意字符。但能夠匹配shotcat中的a，匹配shotcaat中的前兩個a，也匹配shotcaaaaaaaat中的前三個a。注意: 當匹配shotcaaaaaaaat時，匹配的值是「aaa」，即便原始的字符串中有更多的a。

簡寫形式

一些經常使用的量詞爲了方便（偷懶），人們又規定了一些簡寫形式：

匹配規則	元字符	聯想方式
具體只能多少次	{x}	{x}內只有一個數字。定死了，是幾就只能是幾回
至少min次	{min, }	左邊min表示至少min次，右邊沒有則能夠無限次
至多max次	{0, max}	左邊數字爲0表示至少0次，右邊max表示至多max次
0次或1次	?	且問,此事有還無
0次或無數次	*	宇宙洪荒,辰宿列張：宇宙伊始，從無到有，最後星宿佈滿星空
1次或無數次	+	一加, +1
特定次數	{min, max}	能夠想象成一個數軸，從一個點，到一個射線再到線段。min和max分別表示了左閉右閉區間的左界和右界

貪婪匹配與惰性匹配

• 貪婪匹配

  默認狀況下，量詞(包括簡寫形式)是貪婪的，即它們會盡量的多去匹配符合條件的字符(我全都要=。=)。仍是以前的栗子：/a{1,3}/，當它匹配「shotcaaaat」時，雖然a出現1次，2次，3次都是符合的，但它仍是會貪婪地儘量匹配最多的次數。因此它不會匹配到1個a時就結束，而是匹配獲得3個a。

• 惰性匹配(也稱非貪婪)

  有時候咱們不但願量詞那麼貪婪，只但願它匹配到恰好符合的次數就行，不要那麼多。那怎麼辦呢，此時只需在後面加上一個問號?就行。舉個栗子：/a{2,3}?/，當它匹配「shotcaaaat」時,因爲此時是惰性匹配，因此它只會匹配獲得2個a，而不會貪婪地要3個。

貪婪量詞	惰性量詞
{m,n}	{m,n}?
{m,}	{m,}?
?	??
+	+?
*	*?

元字符--多選分支x|y

多選分支能夠幫助咱們匹配多種不一樣的狀況。例如：要匹配字符串 "shot" 和 "cat" 可使用 /shot|cat/其中經過管道符|將不一樣備選字符或位置隔開。

注意：多選分具備惰性

多選分支是具備惰性的！即當前面的匹配上了，後面的就再也不嘗試了。例如：當咱們用 /shot|shotcat/去匹配"shotcat"時，獲得的結果只有shot。改爲 /shotcat|cat/去匹配「shotcat」，就只會獲得「shotcat」。

元字符--位置匹配

正則表達式是匹配模式，要麼匹配字符，要麼匹配位置。

上面介紹的元字符都是匹配字符，下面介紹匹配位置的元字符。

既然要匹配位置，那字符串裏的位置是指什麼，很簡單，指的就是字符與字符之間的位置，或者是字符之間的空字符""。例如：字符串"cat"就有4個位置，分別爲："1c2a3t4"。注意還包括字符開頭和結尾的位置。

單詞邊界\b和非單詞邊界\B

• \b 是單詞邊界

  單詞與非單詞之間的位置，也就是 \w 與 \W 之間的位置。\b，其中b是boundary邊界的首字母。 栗子1：

  var result = "[JS] Lesson_01.mp4".replace(/\b/g, '#');
  console.log(result);
  // "[#JS#] #Lesson_01#.#mp4#"
  複製代碼

  栗子2：字符串"my name is shotcat."想要匹配到shotcat。可使用\bshotcat\b。這樣匹配shotcat時，會確保它的先後兩邊是否都爲單詞與非單詞之間的位置。

• \B是非單詞邊界

  很簡單，就是單詞邊界的反面。具體來講就是單詞內部之間的位置，非單詞內部之間的位置，非單詞與開頭和結尾的位置，即 \w 與 \w、 \W 與 \W、^(開頭) 與 \W，\W 與 $(結尾) 之間的位置。

  栗子1：

  var result = "[JS] Lesson_01.mp4".replace(/\B/g, '#'); 
  console.log(result);
  // "#[J#S]# L#e#s#s#o#n#_#0#1.m#p#4"
  複製代碼

字符串邊界^ $

說完單詞的邊界，再說更長的字符串邊界。

^(脫字符)匹配字符串開頭，在有修飾符m的多行匹配中也匹配行開頭。 $(美圓符號)匹配字符串結尾，在有修飾符m的多行匹配中也匹配行結尾。

栗子1：

var result = "hello".replace(/^|$/g, '#'); 
console.log(result);
// "#hello#"
複製代碼

栗子2：

var result = "I\nlove\njavascript".replace(/^|$/gm, '#'); 
console.log(result);
/* #I# #love# #javascript# */
複製代碼

特定字符的先後位置

若是匹配的位置是在某個特定位置呢，某個特定字符的先後位置。這時就能夠用到下面的元字符：

• 先行斷言與後行斷言

  • 先行斷言：x(?=y) 當字符爲y時，則匹配y前面的x。
  • 栗子：

  var result = "orangecat".replace(/orange(?=cat)/, 'shot'); 
  console.log(result);
  // => "shotcat"
  複製代碼

  • 後行斷言：(?<=y)x 當字符爲y時，則匹配y後面的x。
  • 栗子：

  var result = "shotdog".replace(/(?<=shot)dog/, 'cat'); 
  console.log(result);
  // => "shotcat"
  複製代碼

• 正向否認查找與反向否認查找

  • 正向否認查找：就是先行斷言的反面，區別就是不等於y。x(?!y) 當字符不爲y時，則匹配y前面的x。
  • 栗子：

  var result = "orangecat".replace(/orange(?!dog)/, 'shot'); 
  console.log(result);
  // => "shotcat"
  複製代碼

  • 反向否認查找：就是後行斷言的反面，區別就是不等於y。(?<!y)x 當字符不爲y時，則匹配y後面的x。
  • 栗子：

  var result = "shotdog".replace(/(?<!long)dog/, 'cat'); 
  console.log(result);
  // => "shotcat"
  複製代碼

位置匹配總結

最後，總結一下：

邊界和標誌	正則表達式	記憶方式
單詞邊界	\b	boundary
非單詞邊界	\B	not boundary
字符串開頭	^	小頭尖尖那麼大個
字符串結尾	$	美圓符$
先行斷言	x(?=y)	相似三元操做符，?=y 則找前面的x
後行斷言	(?<=y)x	<寓意前面已經關上了，從後面找 。匹配到y 則找後面的x。
正向否認查找	x(?!y)	!表示否認，若是不是y 則匹配前面的x
反向否認查找	(?<!y)x	<寓意前面已經關上了，從後面找 。若是不是y 則匹配後面的x。

字符標誌

字符標誌並不屬於元字符，它是對整個正則進行一些全局的操做。目前全部的標誌僅有如下幾個

標誌	描述
g	全局搜索。在匹配到一個結果後，不會中止，直到將整個字符匹配完，獲得全部結果
i	不區分大小寫搜索。
m	多行搜索。會忽略換行符
s	容許 . 匹配換行符。
u	使用unicode碼的模式進行匹配。
y	執行「粘性」搜索,匹配從目標字符串的當前位置開始，可使用y標誌。

通常狀況下用得最多的就是前三個g,i,m。標誌不是元字符，使用的位置也不在一塊兒：

var re = /\w+\s/g;

var re = new RegExp("\\w+\\s", "g");
複製代碼

分組--正則中括號的做用 ( )

括號的做用：就是將正則表達式裏的一部分用括號包裹起來，做爲一個總體，也稱爲子表達式。 這樣也就爲表達式提供了分組功能。

分組和分支結構

• 分組：用括號包裹的正則爲分組
  • 栗子：

    // /(ab)+/裏ab用括號包裹，提供了分組的功能，表示ab做爲一個總體至少出現一次
    var regex = /(ab)+/g;
    var string = "ababa abbb ababab";
    console.log( string.match(regex) ); 
    // => ["abab", "ab", "ababab"]
    複製代碼

• 分支結構：前面講過度支，這裏的分支則是在括號內，也是用管道符|表示
  • 栗子：

    // /^I love (JavaScript|Regular Expression)$/ 包含兩種狀況 I love JavaScript 和 I love Regular Expression 均可以
    var regex = /^I love (JavaScript|Regular Expression)$/;
    console.log( regex.test("I love JavaScript") );
    console.log( regex.test("I love Regular Expression") );
    // => true
    // => true
    複製代碼

分組引用

括號造成的分組還具備一個重要的功能 就是分組引用。就是你能夠將括號里正則，匹配到的字符進行提取，以及替換的操做。

例如：咱們要用正則來匹配一個日期格式，yyyy-mm-dd，咱們能夠寫成分組形式的/(\d{4})-(\d{2})-(\d{2})/ 。這裏三個括號包裹的就分別對應分組1，分組2，分組3。

提取數據

在介紹正則表達式方法時，介紹過提取數據，會用到兩個方法：String 的 match 方法和正則的 exec 方法。

• match：

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
console.log( string.match(regex) );
// => ["2017-06-12", "2017", "06", "12", index: 0, input: "2017-06-12"]
複製代碼

match返回一個數組，第一個元素是總體匹配結果，而後是各個分組（括號裏）匹配的內容，而後是匹配下標，最後是輸入的文本。

• exec：

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
console.log( regex.exec(string) ); 
// => ["2017-06-12", "2017", "06", "12", index: 0, input: "2017-06-12"]
複製代碼

• 也能夠用正則對象構造函數的全局屬性 $1 - $9 來獲取：

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";

regex.test(string); // 正則操做便可，例如
//regex.exec(string);
//string.match(regex);

console.log(RegExp.$1); // "2017"
console.log(RegExp.$2); // "06"
console.log(RegExp.$3); // "12"
複製代碼

替換數據

替換數據使用的則是String 的 replace 方法。

栗子：把yyyy-mm-dd格式，替換成mm/dd/yyyy

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
var result = string.replace(regex, "$2/$3/$1");
console.log(result); 
// => "06/12/2017"

// String 的 replace 方法在第二個參數裏面能夠用 $1 - $9 來指代相應的分組
複製代碼

也等價於：

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
var result = string.replace(regex, function(match, year, month, day) {
	return month + "/" + day + "/" + year;
});
console.log(result); 
// => "06/12/2017"
複製代碼

反向引用

前面說到引用分組，它引用的分組是來自於匹配完後獲得的結果。而反向引用也能夠引用分組，只是它的分組來自於匹配階段捕獲到的分組。爲了方便理解下面來看栗子：

要寫一個正則支持匹配以下三種格式：

2016-06-12

2016/06/12

2016.06.12

咱們會想到這樣寫：

// 前面知道集合的寫法，改寫成 [-/.] ，表示這三種均可以
var regex = /\d{4}[-/.]\d{2}[-/.]\d{2}/;
var string1 = "2017-06-12";
var string2 = "2017/06/12";
var string3 = "2017.06.12";
var string4 = "2016-06/12";
console.log( regex.test(string1) ); // true
console.log( regex.test(string2) ); // true
console.log( regex.test(string3) ); // true
console.log( regex.test(string4) ); // true

複製代碼

可是"2016-06/12" 也被判斷正確，這很顯然不是咱們但願的，咱們但願第二個鏈接符，和第一個保持一致。這時候就須要用到反向引用了。咱們但願第二個鏈接符和第一個匹配到的保持一致。首先須要把第一個[-/.]加上括號([-/.])，樣才能方便引用。第二個鏈接符須要和第一個保持一致，這就須要引用它。這個時候就用\1，來表示第一個引用，同理\2和\3等表示第二和第三個醫用。那麼以前的正則就改成了/\d{4}([-/.])\d{2}\1\d{2}/。接着進行驗證：

var regex = /\d{4}([-/.])\d{2}\1\d{2}/;
var string1 = "2017-06-12";
var string2 = "2017/06/12";
var string3 = "2017.06.12";
var string4 = "2016-06/12";
console.log( regex.test(string1) ); // true
console.log( regex.test(string2) ); // true
console.log( regex.test(string3) ); // true
console.log( regex.test(string4) ); // false
// 結果徹底符合預期！
複製代碼

這裏提到的都是理想狀況，若是狀況更加複雜呢?

分組嵌套

若是出現分組嵌套（括號嵌套）的狀況怎麼辦？這時候對分組序號的判斷會產生干擾，到如今你確定也能感受出來，正則的匹配順序是從左到右，一樣分組也是這樣的從左到右。咱們只需按左括號的順序，依次判斷分組便可。

栗子：

var regex = /^((\d)(\d(\d)))\1\2\3\4$/;
var string = "1231231233";
console.log( regex.test(string) ); // true
console.log( RegExp.$1 ); // 123 第一個分組
console.log( RegExp.$2 ); // 1 第二個分組
console.log( RegExp.$3 ); // 23 第三個分組
console.log( RegExp.$4 ); // 3 第四個分組
複製代碼

從左往右分析分組：

第一個分組：((\d)(\d(\d))) 表示須要匹配三個連在一塊兒的數字，其中嵌套了三個分組，匹配獲得結果\1：123 第二個分組：(\d) 表示須要匹配一個數字，按照順序匹配獲得結果\2：1 第三個分組：(\d(\d)) 表示須要匹配兩個數字，其中嵌套了一個分組，按照順序匹配獲得結果\3：23 第四個分組：(\d) 表示須要匹配一個數字，按照順序匹配獲得結果\4：3

\10表示什麼

\10是表示第10個分組，仍是\1和0呢？

答案是第10個分組，雖然一個正則裏出現\10比較罕見。

var regex = /(1)(2)(3)(4)(5)(6)(7)(8)(9)(#) \10+/;
var string = "123456789# ######"
console.log( regex.test(string) );
// => true
複製代碼

引用不存在的分組

在正則裏引用了不存在的分組時，此時正則不會報錯，只是匹配反向引用的字符自己。例如\2，就匹配"\2"。

注意："\2"表示對"2"進行了轉意。極可能轉義的2 就不是數字2了，就變成其餘字符了！因此咱們再使用時必定要注意不要引用不存在的分組！

非捕獲分組

前面說到的分組均可以被引用，若是我不想被引用，則可使用非捕獲分組(?:p)。由於引用是會在內存裏開闢一個位置，因此非捕獲分組還能夠避免浪費內存。

var str = 'shotcat'
str.replace(/(shotca)(?:t)/, '$1,$2')
// 返回shotca,$2
// 因爲使用了非捕獲正則，因此第二個引用沒有值，這裏直接替換爲$2
複製代碼

正則匹配步驟與回溯

正則匹配步驟

咱們知道正則匹配的方向是從左到右的，那具體到每一個字符的匹配步驟是怎樣的。咱們以一個例子來具體說明：

正則表達式/ab{1,3}bbc/ ,目標字符串爲「abbbc」

2~5 ：此時正則已經匹配到b{1,3}，字符串來到了第三個b。這時候b{1,3}也已經獲得知足了拿到了最多的3個b。

6：此時正則來到了b{1,3}後面的第一個b。這時候字符串開始對前面的c進行匹配。

7：發現匹配到了錯誤的c，可是正則並無報錯，而是進行了回溯。即它又往回走回頭路了。正則又回到了b{1,3}，字符串也從第三個b回退到了第二個b。發現2個b也是符合b{1,3}條件的。

8：此時正則又來到了b{1,3}後面的第一個b。字符串也把第三個b匹配給了它。

9：正則來到了b{1,3}後面的第二個b，字符串缺發現它前面又是c，又沒法匹配。

10： 正則又逐步進行回溯，又來到了b{1,3}，字符串也逐步退到了第一個b。

11：此時正則爲b{1,3}，字符串發現只有一個b，也是知足要求的，就把第一個b給了正則。

12~13：開始逐個匹配最後的bbc，字符串也逐個完成匹配。至此整個匹配過程結束。

回溯

從前面的例子，已經能感受到什麼是回溯。回溯就是正則在匹配過程當中，發現下一個字符不能知足匹配，則回退到上一步正則，再匹配其餘可能，而後繼續往下匹配的過程。若是回溯一步不行，正則還會繼續回溯。直到嘗試完全部狀況。這種匹配方法也被稱爲回溯法。

本質上就是深度優先搜索算法。其中退到以前的某一步這一過程，咱們稱爲「回溯」。當前面的路走不通時，就會發生「回溯」。即，嘗試匹配失敗時，接下來的一步一般就是回溯。當回溯發生時會致使資源和時間的浪費，因此咱們在編寫正則時要儘可能避免回溯的發生。

常見的回溯形式

在編寫正則時，須要注意如下幾點，來避免回溯：

貪婪量詞

從前面的例子也能夠看出是量詞致使了回溯，緣由就是默認狀況下量詞是貪婪匹配的。它會盡可能匹配更多的結果，這樣就可能致使後面的正則匹配出錯，致使回溯。換句話說就是：你太貪了致使後面的吃不到，拿不到匹配的數據。

注意： 若是有多個量詞的狀況，匹配的結果是怎樣的？答：先到先得！

栗子：

var string = "12345";
var regex = /(\d{1,3})(\d{1,3})/;
console.log( string.match(regex) );
// => ["12345", "123", "45", index: 0, input: "12345"]
複製代碼

其中，前面的 \d{1,3} 匹配的是 "123"，後面的 \d{1,3} 匹配的是 "45"。

惰性量詞

可能你會想到，既然貪婪量詞會致使回溯，那就儘可能使用惰性量詞。

錯！惰性量詞也會致使回溯，前面說過貪婪量詞是太貪了，吃得太多了，致使後面的吃不到匹配的數據。而惰性量詞是太懶了，吃得太少了，致使後面的吃太多了，吃不下了。

怎麼理解，看這個例子：

正則/^(\d{1,3}?)(\d{1,3})$/對'12345’ 進行匹配。

第一個 從步驟5，6能夠看出第一個(\d{1,3}?)只匹配了一個1，吃得太少了，致使第二個在遇到後5後，實在吃不下了。那沒辦法，只能回溯，讓第一個再多吃一個2進去，這樣就能繼續匹配完。

分支結構

前面講到分支時，也提過度支也是具備惰性的，一樣也會致使回溯。例如：/shot|shotcat/當匹配到了shot時，則不會再去考慮後面的shotcat。因此當它匹配字符shotcat時，會首先匹配shot分支，可是到c字母時，發現不匹配又回溯，嘗試第二個分支shotcat來進行匹配。

那怎麼避免回溯？

咱們分析了多種引發回溯的形式，致使回溯的緣由是後面的狀況走不通，正則回退到了上一步，這樣就須要對正則的狀況進行合理搭配限制，當次數過多時，能夠經過惰性量詞進行合理限定，當正則匹配的數據存在關聯時，則能夠經過引用限定爲具體的數據。這些都能有效減小回溯。

正則表達式的閱讀

正則是有一堆字符組合成的語言，在閱讀起來沒有其餘語言輕鬆。因此當咱們須要閱讀他人的正則，理解其含義就顯得很重要。

PS：若是正則實在太難懂了，或者不太肯定。其實有不少輔助工具能夠幫助分析正則。例如前面提到的https://jex.im/regulex

結構和操做符優先級

前面講到過正則是有普通字符和元字符組成的。

那結構是什麼？就是字符與元字符組成的一個總體。正則會將這個做爲一個總體去匹配。例如[abc]，它就是由元字符[]和普通字符abc一塊兒組成的一個結構。正則遇到後就會做爲一個總體去匹配，匹配的字符多是abc中的任意一個。

JavaScript 正則表達式包含以下幾種結構：字符字面量、字符組、量詞、錨、分組、選擇分支、反向引用。

結構	說明
字面量	匹配一個具體字符，包括不用轉義的和須要轉義的。好比a匹配字符"a"，又好比\n匹配換行符，又好比\.匹配小數點。
字符組	匹配一個字符，能夠是多種可能之一，好比[0-9]，表示匹配一個數字。也有\d的簡寫形式。另外還有反義字符組，表示能夠是除了特定字符以外任何一個字符，好比[^0-9]，表示一個非數字字符，也有\D的簡寫形式。
量詞	表示一個字符連續出現，好比a{1,3}表示「a」字符連續出現3次。另外還有常見的簡寫形式，好比a+表示「a」字符連續出現至少一次。
錨點	匹配一個位置，而不是字符。好比^匹配字符串的開頭，又好比\b匹配單詞邊界，又好比(?=\d)表示數字前面的位置。
分組	用括號表示一個總體，好比(ab)+，表示"ab"兩個字符連續出現屢次，也可使用非捕獲分組(?:ab)+。
分支	多個子表達式多選一，好比abc
反向引用	好比\2，表示引用第2個分組。

這些結構裏的元字符，也被稱爲操做符。常常這些操做符會進行組合，嵌套。那到底先執行誰呢，那麼操做符也是有優先等級的。以下表：

操做符描述	操做符	優先級
轉義符	\	1
括號和方括號	(...)、(?:...)、(?=...)、(?!...)、[...]	2
量詞限定符	{m}、{m,n}、{m,}、?、*、+	3
位置和序列	^ 、$、 \元字符、 通常字符	4
管道符（豎槓）	|	5

上面操做符的優先級從上至下，由高到低。

說完這麼多咱們來個栗子，逐步進行講解

栗子：/ab?(c|de*)+|fg/

1：正則匹配普通字符a

2：b? b字符出現0次或1次

3：遇到括號將(c|de*)做爲一個總體

4：繼續匹配括號裏的c

5：遇到管道符，c和de*做爲分支

6：匹配d，而後e後面跟着*，表示e能夠重複任意次

7：括號匹配完，遇到+表示(c|de*)須要匹配至少1次

8：而後又遇到了一個管道符。此時將ab?(c|de*)+和fg做爲兩個分支

下面咱們再看輔助軟件分析獲得的示意圖：

總結： 遇到正則，從左向右進行閱讀，根據結構對正則進行劃分，結構複雜不肯定的就比較優先級，相同結構則依照先到先得的原則。最後實在不行，還有殺手鐗，藉助輔助進行可視化分析。

正則表達式的構建

說了正則的閱讀，如今來說講正則的構建。

何時須要本身構建正則

學到這，你會發現正則很強大。但你在想要構建正則的時候，但願你問本身幾個問題？

• 是否有現成的api能夠作到？

  不少時候，比較簡單常見的功能已經有現成的api能夠知足。例如：判斷字符裏是否有'!'，能夠直接使用indexOf方法。提取某個字符能夠根據下標使用substring 或 substr 方法。而且一些框架也會提供常見api方法，例如vue裏的修飾符，表單裏使用<input v-model.trim="msg">trim能夠去除首尾空白字符。

• 網上是否有現成的正則？

  對於一些很常見的校驗，網上都有現成的正則可使用，這些正則是他人使用後獲得驗證的，可靠性也是有保障的。

若是上面的問題都得不到滿意結果的話，那麼能夠開始考慮構建正則了

構建的準則

在咱們編寫正則時，儘可能遵循這幾個原則，編寫出準確高效可靠的正則。

• 準確的匹配本身想要的字符
• 正則的可靠性
• 可讀性與可維護性
• 效率

準確的匹配與構建步驟

在開始編寫正則時，首先必須明確的一點是：你必須弄清楚想要的是什麼，是要匹配怎樣的字符！ 這點看似很簡單，我固然知道我本身想要什麼了，但每每拿到數據才發現有些數據是我不須要的，是我沒考慮到。

考慮清楚本身到底想要什麼的數據，對編寫正則起到了相當重要的做用！

通常的構建步驟：

• step1 弄清楚你想要的是什麼，是要匹配怎樣的字符

• step2 寫出一個你認爲最具表明性的一個匹配字符

• step3 開始從左到右構建你的正則，首先是否須要匹配位置，若是是的話，要匹配的字符的位置是在哪，單詞邊界仍是特定字符的先後？仍是正常的從左到右，需不須要用^``$限定開頭結尾。

• step4 位置找到後就是字符的限定。關於限定的字符有不少，這裏大概分爲兩類：正向限定和反向限定。在進行限定時要合理使用，既要包含全部咱們想要的字符，還要不匹配咱們不想要的字符。

• 正向限定

  什麼是正向限定？當咱們清楚知道本身想要匹配的數據具體是那些，例如某個具體的字符'abc'，或者某個肯定的位置，如某個字符的開頭或結尾，再或者某個明確的引用\1，再或者明確的集合[1-10]。這些都是正向限定，即你明確知道本身想要的是那些具體的字符，而後對此進行正則限定。

• 反向限定

  什麼是反向限定？當想要匹配的字符範圍很大亦或正向限定太多時，咱們能夠經過排除法，只要不是這字符的就是咱們想要的字符。目前正則裏的元字符更多的是正向限定，反向限定並很少。更沒有什麼大於小於之類的。總共就這幾個：反向字符集 [^abc]，\D,\W,\S,\B，正向否認查找x(?!y)和反向否認查找(?<!y)x。

• step5 字符限定完後，就是它的次數進行限定。注意：次數通常僅對它前面的單個字符起做用，多個字符須要括號做爲總體。格外注意次數可能引發的回溯。以後還有其餘字符匹配，重複步驟345.

• step6 最後，就是字符標誌，對整個正則進行限定，是全局匹配仍是多行等等。

• step7 校驗！本身寫的正則必定要回頭進行校驗檢查，是否是包含了全部的狀況，邊際問題，特殊狀況都須要考慮到。用一些特殊字符進行檢查校驗，並能夠經過輔助進行可視化分析，方便修改。

正則的可靠性

這裏的可靠性是指正則在運行時是穩定的，不會發生災難性回溯：不會回溯過多，形成 CPU 100%，正常服務被阻塞。若是你寫的正則回溯太多，效率低下，遇到一個很長很長的字符串時，就可能引起災難性回溯。

這裏就有一篇文章一個正則表達式引起的血案，讓線上CPU100%異常！

因此在編寫完正則後，必定要進行檢查優化，確保正則的可靠性，不會出現災難性回溯。

可讀性與可維護性

正則雖然寫完是給機器用的，可是仍是要給人看的，因此寫正則儘可能簡潔，不要複雜，例如提取分支裏公共部分。

效率

有時雖然咱們寫的正則能夠知足要求，可是遇到複雜長一點的字符，或者密集的使用，就會變得緩慢。這時就須要對正則進行修改優化，提高效率。

通常從三方面考慮：減少限定範圍，減少內存佔用，減少回溯。

• 縮減限定範圍：若是明確是哪些具體字符組，就不要使用通配符了。
• 減少內存佔用：前面講過，引用是須要佔用內存保存的，若是咱們只想用來做爲一個總體，不會引用，則可使用非捕獲分組(?:)
• 減少回溯：提取分支公共部分，減小分支。合理使用量詞或者當正則匹配的數據存在關聯時，能夠經過引用限定爲具體的數據。最重要的仍是對本身正則的匹配過程要熟悉，知曉在哪步會出現匹配不到而走回頭路。

注意事項

正則相關方法注意事項

在文章開始部分介紹了正則表達式的方法，鑑於那時還沒正式講解正則，因此只提了基本用法。這裏開始對它們使用的注意事項進行說明：

search 和 match 的參數轉換問題

search和match方法會默認將字符轉化爲正則，什麼意思，舉個栗子：

var string = "2017.06.27"; 
console.log( string.search(".") ); // => 0
// 這裏匹配的小標爲何是0呢？咱們本來是打算匹配字符串'.' 可是search將它轉化爲正則了，在正則裏'.'表明的是匹配除換行符以外的任何單個字符。因此取到的是2，下標天然就是0

//須要修改爲下列形式之一
console.log( string.search("\\.") );  //經過轉義
console.log( string.search(/\./) ); // 建議使用search時仍是直接使用正則最安全
// => 4
// => 4


console.log( string.match(".") );  // 也是由於將'.'轉化爲正則了,因此取到的是2，下標也就是0
// => ["2", index: 0, input: "2017.06.27"]
//須要修改爲下列形式之一
console.log( string.match("\\.") );
console.log( string.match(/\./) );
// => [".", index: 4, input: "2017.06.27"]
// => [".", index: 4, input: "2017.06.27"]
複製代碼

鑑於這樣的坑，建議仍是統一直接用正則，不要用字符串，免得轉義。

match 返回結果的格式問題

注意： match 返回結果的格式，與正則對象是否有修飾符 g 有關。仍是看個例子：

var string = "2017.06.27";
var regex1 = /\b(\d+)\b/;  //咱們知道這段正則能匹配單詞邊界中間的數字
var regex2 = /\b(\d+)\b/g;  // 加上g標誌後，表示全局搜索。即在匹配到一個結果後，不會中止，直到將整個字符匹配完，獲得全部結果
console.log( string.match(regex1) );
console.log( string.match(regex2) );
// => ["2017", "2017", index: 0, input: "2017.06.27"] 因爲第一個沒有g，它在匹配到第一個2017，就沒有繼續了，可是此時是有括號做爲分組的，因此它又接着匹配分組獲得的2017，因此會出現兩個2017，而且獲得的數組還包含index和input

// => ["2017", "06", "27"] //因爲含有標誌g，此時正則不會在2017處結束，而是一直匹配到字符串末尾。返回獲得的結果也是沒有input和index
複製代碼

我建議仍然是在使用match時儘可能加上g，尤爲是有分組引用時。

exec 比 match 更強大

上面說過在有g的時候，match返回的數組格式會有變化，麼有index和input信息。但exec則能夠，那它怎麼作到了，答案就是分批返回。

var string = "2017.06.27";
var regex2 = /\b(\d+)\b/g;
console.log( regex2.exec(string) );
console.log( regex2.lastIndex);
console.log( regex2.exec(string) );
console.log( regex2.lastIndex);
console.log( regex2.exec(string) );
console.log( regex2.lastIndex);
console.log( regex2.exec(string) );
console.log( regex2.lastIndex);
// => ["2017", "2017", index: 0, input: "2017.06.27"]
// => 4
// => ["06", "06", index: 5, input: "2017.06.27"]
// => 7
// => ["27", "27", index: 8, input: "2017.06.27"]
// => 10
// => null
// => 0
複製代碼

例子能夠看出：exec接着上一次匹配後繼續匹配，其中lastIndex爲上一次匹配的索引。

當你須要清楚掌握每次匹配到的信息時，可使用強大的exec。

更增強大的replace

replace 有兩種使用形式，這是它的第二個參數，既能夠是字符串，也能夠是函數。

• 第二個參數爲字符串時，能夠插入如下特殊變量名

屬性	描述
$1,$2,...,$99	匹配第1~99個分組裏捕獲的文本
$&	匹配到的子串文本
$`	匹配到的子串的左邊文本
$'	匹配到的子串的右邊文本
$$	美圓符號

栗子：把"2,3,5"，變成"5=2+3"：

var result = "2,3,5".replace(/(\d+),(\d+),(\d+)/, "$3=$1+$2");
console.log(result);
// => "5=2+3"
複製代碼

• 第二個參數爲函數時，函數各參數的意義

變量名	表明的值
match	匹配的子串。（對應於上述的$&。）
$1,$2, ...	假如replace()方法的第一個參數是一個RegExp 對象，則表明第n個括號匹配的字符串。例如，若是是用 /(\a+)(\b+)/ 這個來匹配，$1 就是匹配的 \a+，$2 就是匹配的 \b+。
index	匹配到的子字符串在原字符串中的索引。（好比，若是原字符串是 'abcd'，匹配到的子字符串是 'bc'，那麼這個參數將會是 1）
input	被匹配的原字符串。

"1234 2345 3456".replace(/(\d)\d{2}(\d)/g, function(match, $1, $2, index, input) {
	console.log([match, $1, $2, index, input]);
});
// => ["1234", "1", "4", 0, "1234 2345 3456"]
// => ["2345", "2", "5", 5, "1234 2345 3456"]
// => ["3456", "3", "6", 10, "1234 2345 3456"]
複製代碼

編寫正則的注意事項

匹配字符串總體問題

匹配整個字符串，咱們常常會在正則先後中加上錨 ^ 和 $。但有時須要注意優先級問題。

例如：咱們想匹配abc或者bcd，若是正則寫成這樣/^abc|bcd$/，因爲位置的優先級更高，因此字符串就要求必須以a開頭，d結尾。這顯然不是咱們指望的，因此此時則須要加上括號保護起來，做爲一個真的個體。所以須要改成/^(abc|bcd)$/。

量詞連綴問題

有時咱們有多個量詞想"連着"使用，例如表示3的倍數，例如：

/^[abc]{3}+$/,咱們但願匹配abc當中的任意一個，且次數是3的倍數，注意這裏咱們將{3}和+兩個量詞連在一塊兒使用，這樣會報錯，說 + 前面沒什麼可重複的。由於+前面也是量詞而不是字符，此時也須要經過括號來解決。將其改成/^([abc]{3})+$/。

元字符轉義問題

咱們知道元字符是一些字符在正則裏表示特殊的含義。可是若是咱們先匹配的字符串裏包含這些字符，這時候就須要考慮元字符轉義的問題。

這種狀況下，基本上大部分元字符都須要逐個轉義。但若是是些成對出現的元字符，只須要轉義第一個，注意： 括號是必須兩個都須要轉義的。

var string = "[abc]";
var regex = /\[abc]/g;  //只需轉義第一個[
console.log( string.match(regex)[0] ); 
// => "[abc]"

var string = "(123)";
var regex =/\(123\)/g;  //括號則須要兩個都轉義
console.log( string.match(regex)[0] ); 
// => "(123)"
複製代碼

不須要轉義的符號：例如 = ! : - ,等符號，它們在正則裏沒有單獨的含義，都是相互組合或者其餘元字符搭配使用的。因此它們是不須要轉義的。

參考資料

第一個老姚的正則 真的是你目前能找到的關於正則的最好最詳細的，我有不少章節都是參考它的。

• JS正則表達式完整教程（略長） （強烈建議）
• 正則表達式不要背