正則系列——JavaScript正則表達式基礎語法鞏固篇

上一章內容：正則表達式實戰篇

知識回顧

前2章分別學習了正則表達式入門技巧，以及遇到正則需求該如何去分析問題，還有正則表達式實戰的一些場景解釋。

這一章內容偏向理論，推薦你點擊開頭的連接前往前2章節學習一下入門技巧，而後再看這一章內容，就不會那麼迷茫了。我一貫相信工程師要先學會作事，才能學懂理論，先學理論，再學作事的一般是紙上談兵，一遇到實戰就懵逼。

基礎語法鞏固

正則表達式引擎根據正則去匹配字符的時候，是經過檢查索引的方式。

RegExp構造函數

JavaScript正則表達式有2種寫法：比較經常使用的是第二種，第一種寫法在一些replace替換時涉及到變量的時候，可能會用到，後面例子若是有這個需求，再說。

一、RegExp
下面實際上是同一種寫法，一個用 "正則"，一個是用 /正則/，注意使用字符串寫法的時候，特殊字符要進行轉義。

var r = new RegExp("\\d+", 'g') //r.test('123') true
//或者是
var r = new RegExp(/\d+/, 'g')  //r.test('123') true

若是你沒有轉義特殊字符，那麼正則就是錯的，好比：

//我錯了
var r = new RegExp("\d+", 'g') //r.test('123') false

二、/正則/
你還能夠直接使用 /正則/ 的寫法。

/\d+/g.test('123') // true

和RegExp有關的幾個方法，compile()、exec()、test()，與之相對於的是search()、match()、replace()、split()，爲了好記，我把她們叫作 「3妻4妾」。

3妻是RegExp的原配方法，4妾是字符串方法。

一、3妻
原配就是好，能夠直接使用正則表達式調用它。

var r = /2/
r.compile(r) //從新編譯正則，這個不太經常使用
r.exec('123') //獲取正則匹配的字符所在的位置
r.test('123') //最受歡迎的妻子，判斷字符串是否符合某個正則，true 或者 false

二、4妾
4妾不是RegExp的方法，而是字符串的方法。在控制檯輸入 ''.__proto__ ，就能看到字符串原型中的這4個方法，又由於她們都和正則有關，因此叫作RegExp的4個小妾。

var r = /2/
'123'.search(r) //返回匹配字符的位置，範圍是0-n，若是不存在，則返回-1。
'123'.match(r) //返回數組，這個方法經常使用在提取字符串中的某些字符。
'123'.replace(r, '4') //最基本的用法是替換正則匹配到的字符串，還有一種高級用法，後面再講。
'123'.split(r) //表示切割字符串，這裏把2切割出來，'123'變成了["1", "3"].
//一般咱們用它來切割字符串裏面的空格或者回車符，而後再map渲染。
'1 2\n3'.split(/[\s\n]/g).map(v => v) //["1", "2", "3"].map()

修飾符

JavaScript中經常使用的修飾符有3種，i、g、m，g你可能常常看獲得。

'Aasb'.match(/a/i) //i表示忽略大小寫，匹配出來的是第一個A
'Aasb'.match(/a/ig) //想要匹配全部的a，就須要加上g全局搜索 ["A", "a"]
m: 多行匹配，具體用法不瞭解

元字符

「元」的含義是元始天尊，「元字符」是元始天尊製造的一個個基礎符文，用這些基礎符文能夠組合出各類高級的正則表達式。

.：查找單個字符，除了換行和行結束符。
\w：查找字母和數字。
\d：查找數字。
\D：查找非數字字符。
\s：查找空白字符。
\S：查找非空白字符。
\b：匹配單詞邊界。
\B：匹配非單詞邊界。
\n：查找換行符。
\f：查找換頁符。
\r：查找回車符。
\t：查找製表符。
\v：查找垂直製表符。

下面解釋一下上面這些經常使用的元字符

查找單個字符，除了換行和行結束符。
換行符你可能知道，可是結束符是什麼？在一個字符串最後，你肉眼看不到的地方，有一個結束符號，在101網站使用 /.*/ 測試一下就能看到了

'第一段\n第二段'.match(/./g) //["第", "一", "段", "第", "二", "段"]

//使用.+以後，匹配出來的效果就和split切割同樣了。
'第一段\n第二段'.match(/.+/g) //["第一段", "第二段"]

查找字母和數字

'aA1'.match(/\w/g) // ["a", "A", "1"]
'aA1'.match(/\w+/g) // ["aA1"]

其餘字符本身去101網站測試玩一下，頗有趣的。

括號內的正則

咱們常常看獲得 []、()、{}這幾種括號穿插在正則表達式中，讓人眼花繚亂。但它的本質很是簡單，很好理解。你須要注意 [^abc]中的 ^ 和寫在/^abc$/的做用是不一樣的。

[abc]：查找方括號之間的任何字符。
[^abc]：查找任何不在方括號之間的字符。
[0-9]：查找任何從 0 至 9 的數字。
([0-9]|\d)：查找任何指定的選項。
[0-9]{1}：查找一次數字。

看幾個實例

實例1：

實例2：

實例3：

實例4：

量詞

量詞的意思是次數，前面咱們已經使用到了一些量詞符號，好比 +、 ?、 *、 {n, m}、 ^x$、最後還有零寬斷言 ?=n、?!n

n+：匹配任何包含至少一個 n 的字符串。
n*：匹配任何包含零個或多個 n 的字符串。
n?：匹配任何包含零個或一個 n 的字符串。
n{X}：匹配包含 X 個 n 的序列的字符串。
n{X,}：X 是一個正整數。前面的模式 n 連續出現至少 X 次時匹配。
n{X,Y}：X 和 Y 爲正整數。前面的模式 n 連續出現至少 X 次，至多 Y 次時匹配。
n{X,}：匹配包含至少 X 個 n 的序列的字符串。
n$：匹配任何結尾爲 n 的字符串。
^n：匹配任何開頭爲 n 的字符串。
?=n：匹配任何其後緊接指定字符串 n 的字符串。
?!n：匹配任何其後沒有緊接指定字符串 n 的字符串。

這一段內容無法用文字描述清楚，請自行在 https://regex101.com 測試吧，只有實踐才能理解理論。當你練習的次數足夠多了，以後，你會發現這些量詞都不用刻意記住，憑着感受就能隨手寫出來了。

總結

正則表達式理論知識點不少，這一章內容閱讀起來像讀天書，最重要的仍是找到感受，就像你第一次學習react、vue、angular的時候，徹底找不到方向，慢慢的，寫多了，忽然有感受了。正則還好，沒有太多複雜的概念，就是符號多了點，經常使用的記住就好了。複雜的符號仍是網上搜索吧，好比中文字符的正則，我真的記不住。。。

正則系列文章整理到了github：https://github.com/hyy1115/Re...