《前端之路》之 前端 正則表達式 魔法 （上）

目錄

• 第二章 - 02： 前端 正則表達式 魔法 （上）
  • 1、建立！
  • 2、術語與操做符
    • 2.1 精確匹配
    • 2.2 匹配一類字符
    • 2.3 轉義
    • 2.4 匹配開始與結束
    • 2.5 重複出現

第二章 - 02： 前端 正則表達式 魔法 （上）

來源於：《JavaScript 忍者祕籍》

在咱們的平常開發過程當中其實會經常有遇到利用正則表達式來解決一些棘手的問題。好比獲取當前連接的參數，匹配身份證、手機號、姓名、驗證碼等等等等。那麼咱們今天的 前端之路 系列就來聊一聊 正則表達式 ！

1、建立！

既然是表達式，那麼就必定是存在建立的過程的，如何建立？

建立一個正則表達式，有兩種方式：

一、面向字面量：

const pattern = /test/

二、構造 RegExp 實例

const pattern = new RegExp('test')

// pattern   ->  /test/

兩種方式的比較：

一、若是正則（規則）是已知的，則優先選擇字面量語法。
二、若是是須要在運行的時候經過 動態構建的字符串來建立正則表達式，則須要經過構造器的方式

此外，還有三個標誌能夠和正則表達式進行關聯：

一、 i： 讓正則表達式不區分大小寫[ignore case]
二、 g:  匹配模式中的全部實例 [global]
三、 m:  容許匹配多行，例如匹配文本元素 [multiline]

咱們可能對上面講到的 三點不太理解，那麼咱們用最簡單的例子來解釋一下。

### i: 讓正則表達式不區分大小寫[ignore case]

const reg = /test/i
const res1 = reg.test('testssss')   // true
const res2 = reg.test('Testssss')   // true

const reg2 = /test/
const res21 = reg2.test('testssss') // true
const res22 = reg2.test('Testaaaa') // false

### g: 匹配模式中的全部實例 [global]

const reg = /s/
let res1 = 'testssss'.match(reg)
// ["s", index: 2, input: "testssss", groups: undefined]
// 若是匹配到了第一個就

const reg2 = /s/g
let res2 = 'testssss'.match(reg2)
//  ["s", "s", "s", "s", "s"]

### m: 容許匹配多行，例如匹配文本元素 [multiline]

<div>
    <textarea id="text">
        hahaha
    </textarea>

    <button id='btn'>
        click
    </button>
</div>

var str = ''
        var reg1 = /$/g
        var reg2 = /$/mg
        var text = document.getElementById('text')
        var btn = document.getElementById('btn')
        btn.addEventListener('click', function(e) {
            // str = text.value
            str = '1\n2\n3\n4\n5'
            var s1 = reg1.test(str)    // 空
            var s2 = reg2.test(str)    // 2345
            console.log(RegExp.rightContext)
        })

其實到了這一步，對於 m 的用法還不是特別的清晰，後面，咱們遇到了真實的問題，會再次回來解決這個問題的。

2、術語與操做符

2.1 精確匹配

若是一個字符不是特殊字符或操做符，則表示該字符必須在表達式中出現、例如/test/中有四個字符，它們表示這四個字符必須按順序一個接着一個的出現，才能匹配獲得。

2.2 匹配一類字符

2.2.1 匹配一個有限字符集中的某一個字符時，能夠用 [ ]
eg:

var reg = /[abc]/
var str1 = 'a'
var str2 = 'ab'
var str3 = 'ab'
var str4 = 'adc'
var str5 = 'dd'
var res1 = reg.test(str1)   // true
var res2 = reg.test(str2)   // true
var res3 = reg.test(str3)   // true
var res4 = reg.test(str4)   // true
var res5 = reg.test(str5)   // false

// 總結下來就是 [] 能夠用來匹配任意括號內的內容。
// /[abc]/  包含了 [a] [b] [c] [ab] [ac] [bc] [abc]
// 只要字符串中包含了 上述表達式中的任何一個 都算是知足需求。

2.2.2 匹配一個有限字符集以外的字符，能夠用 [^]
eg:

var reg = /[^abc]/
var str1 = 'a'
var str2 = 'ab'
var str3 = 'ab'
var str4 = 'adc'
var str5 = 'dd'
var res1 = reg.test(str1)   // false
var res2 = reg.test(str2)   // false
var res3 = reg.test(str3)   // false
var res4 = reg.test(str4)   // true
var res5 = reg.test(str5)   // true

// 總結下來就是 [^] 能夠用來匹配任意括號內之外的內容
// 只要字符串中包含了 上述表達式中的任何一個之外的字符 都算是知足需求。

2.2.3 制定一個範圍，可使用 [ - ]

eg:

var reg = /[a-z]/
var str = 's'
var res = reg.test(str)  
console.log(res)        // true

例如[a-z]表示的是a到z之間的全部字符（包括a，z，按字典順序）

2.3 轉義

當要匹配特殊字符的時候，須要對其進行轉義，例如$,^,[等，須要使用反斜槓  

eg:

var reg1 = /\[/
var reg2 = /[/
var str = '['
var res1 = reg1.test(str)   // true
var res2 = reg2.test(str)   // 報錯

2.4 匹配開始與結束

2.4.1 符號^若是做爲正則表達式的第一個字符，則表示要從字符串的開頭開始匹配
2.4.2 符號$做爲正則表達式的最後一個字符，表示該模式必須出如今字符串的結尾
eg:

var reg1 = /^./g
var reg2 = /[a-d]/g
var reg3 = /.$/g

var str = 'esdasdasdasewcfefhdasjkld'
var res1 = str.match(reg1)
var res2 = str.match(reg2)
var res3 = str.match(reg3)

console.log(res1)   // e    字符串的第一個
console.log(res2)   // ['d','a',...,'d']
console.log(res3)   // d    字符串的最後一個

2.5 重複出現

當匹配連續的任意數量 相同字符時，能夠採用下面的方式

2.5.1 ? : 能夠定義該字符是可選的，便可以出現一次或者不出現

eg:

var reg = /t?est/
var str1 = 'trrrrtttttttest'
var str2 = 'trrrrest'
var str3 = 'trrrrrst'
var res1 = reg.test(str1)
var res2 = reg.test(str2)
var res3 = reg.test(str3)
console.log(res1)       // true
console.log(res2)       // true
console.log(res3)       // false

如何理解呢？ 問號表示疑惑🤔 表示2種可能，可能有也可能沒有

2.5.2 + : 一個字符至少出現一次

eg:

var reg = /t+est/g
var str = 'testtttttest'
var res = str.match(reg)
console.log(res)    // ["test", "tttttest"]

如何理解呢？ 加號表示相加。那麼相加的話，就是至少出現一次

2.5.3 * : 一個字符不出現或者出現屢次

eg:

var reg = /t*est/g
var str1 = 'testest'
var str2 = 'testtttest'
var res1 = str1.match(reg)
var res2 = str2.match(reg)
console.log(res1)   // ["test", "est"]
console.log(res2)   // ["test", "tttest"]

如何理解呢？ 星號表示的 比價隨意 ， 能夠出現 也能夠不出現。 綜合了 加號 和 問號。

2.5.4 {n} : 表示一個字符 重複出現 n 次

eg:

var reg = /t{4}/g
var str1 = 'testest'
var str2 = 'testtttest'
var res1 = str1.match(reg)
var res2 = str2.match(reg)
console.log(res1)   // null 
console.log(res2)   // ["tttt"]

如何理解呢？ 這個 n 其實相對來講仍是比較好理解的。 n次～

2.5.5 {n,m} : 表示一個字符 重複出現 n 至 m 次

eg:

var reg = /t{2,5}/g
var str1 = 'testest'
var str2 = 'testtttest'
var str3 = 'testtest'
var res1 = str1.match(reg)
var res2 = str2.match(reg)
var res3 = str3.match(reg)
console.log(res1)   // null 
console.log(res2)   // ["tttt"]
console.log(res3)   // ["tt"]

2.5.6 {n,} : 表示一個字符 至少 重複出現 n 次

eg:

var reg = /t{1,}/g
var str1 = 'testest'
var str2 = 'testtttest'
var str3 = 'testtest'
var str4 = 'esaesa'
var res1 = str1.match(reg)
var res2 = str2.match(reg)
var res3 = str3.match(reg)
var res4 = str4.match(reg)
console.log(res1)   // ["t", "t", "t"]
console.log(res2)   // ["t", "tttt", "t"]
console.log(res3)   // ["t", "tt", "t"]
console.log(res4)   // null

Tips： 在匹配的時候，還有一點要注意的是：貪婪和非貪婪。在默認狀況下，它們是貪婪的，即會匹配全部的字符組合，在操做符後面加一個?，可讓該表達式成爲非貪婪的，進行最小限度的匹配
eg:

var reg1 = /a+/g
var reg2 = /a+?/g
var str = 'aaa'
var res1 = str.match(reg1)  // ['aaa']
var res2 = str.match(reg2)  // ["a", "a", "a"]

這裏提到了一個 正則表達式中一個比較重要的 概念就是 貪婪 和 非貪婪
貪婪匹配 就是： 正則表達式通常趨向於最大長度的匹配（默認爲貪婪匹配）。
非貪婪匹配 就是： 正則表達式 匹配到就好了，再也不繼續日後走。
在操做符後面加一個 ? 就能夠將 貪婪變成非貪婪。

GitHub 地址：（歡迎 star 、歡迎推薦 : )

前端 正則表達式 魔法 （上）