JS核心知識點梳理——正則篇（上）

正則

引言

正則是一個前端必須掌握的知識。可是因爲用的少，忘了記，記了忘，致使面試常常坐蠟。這裏上篇先介紹正則的規則，下篇結合一些具體題目，帶你們從新學習鞏固一下正則，爭取面試給本身加分。

簡介

介紹：用來處理字符串的一個規則

正則：判斷一個字符串是否符合咱們的規則-> reg.test(str)
捕獲：把字符串中符合咱們規矩的子字符捕獲到 ->reg.exec(str)

規則

生成正則的兩種方式

實例建立和使用字面量，可是要注意使用實例建立正式是可使用變量進行拼接的

正則表達式由兩種基本字符類型組成，原義文本字符和元字符

元字符：在正則表達式中具備特殊意義的字符，原義字符變元字符加''

元字符分類

邊界類

^ 開頭 $ 結尾 b 單詞邊界 B非單詞邊界

/\bengineer$/.test('I am an engineer') //true

量詞類

*： 零次到屢次
+：1次到屢次
?: 0次或者1次
{n} 出現n次
{n，m} 出現n次到m次

let reg = /1\d{10}$/ //驗證手機號，第一位是1

範圍類

[a-z] a-z之間的任何一個字符
[a-zA-Z] a-z以及A-Z之間的任何一個字符

'a1b2C3C4'.replace(/[a-z]/g,'Q') //"Q1Q2C3C4"

字符類

x|y ：x或y中的一個
[xyz]: x或者y或者z中的一個
[^a-z] 除了a-z之外的任何一個字符
[^xyz] 除了xyz之外的任何一個字符

預約義類

// .  除了回車和換行的全部字符 [^\r\n]
// \d 數字 [0-9]
//  \s  空白字符 [\t\n\x0B\f\r]
// \w 單詞 字符[A-Za-z0-9_]  //注意，.的範圍要比\W範圍大，由於它還包括製表符之類的`注意只是一個字符而不是一個單詞`
'hello'.replace(/\w{2}$/g,'x')  //helx

修飾符以及正則對象屬性

修飾符：

i 忽略大小寫
g 全局匹配
m 多行匹配
注意這裏設置了，在正則對象裏的相應屬性會改變

var a = /\d/g
a.global  //true
var b = /\d/
b.global  //false

正則對象屬性：

global ignore case multiline lastIndex sourse
注意，lastindex在全局匹配裏面會匹配一次改變一個，超出匹配範圍會被清零

var reg1 = /\w/
var reg2 = /\w/g
reg1.test('a') //true //reg1.lastIndex //0
reg1.test('a') //true //reg1.lastIndex //0
reg1.test('a') //true //reg1.lastIndex //0
reg2.test('a') //true //reg2.lastIndex //1
reg2.test('a') //false //reg2.lastIndex //0
reg2.test('a') //true //reg2.lastIndex //1
reg2.test('a') //false //reg2.lastIndex //0

貪婪模式和非貪婪模式

正則默認是貪婪模式，會按儘量多的匹配，在量詞後面加？能夠取消貪婪性

123456.replace(/\d{3,6}/g,'x') //因爲有貪婪性，按6次匹配,結果爲'x'
'123456'.replace(/\d{3,6}?/g,'x') //此時沒有貪婪性，可是有全局匹配，結果爲'xx'
'123456'.replace(/\d{3,6}?/g,'x') //此時沒有貪婪性，局部匹配，結果爲'x456'

分組以及或

或|，左邊的單詞（分組）或者右邊的單詞（分組）出現均可以
分組的目的是爲了更好的捕獲，增長控制力 分組能夠用num表明
注意或|的優先級是最低的，比字符串串接的優先級還要小，因此有/Bayron|casper/是匹配兩個單詞而不是n或者c的狀況

bary{3}  //y重複3次
(bary){3} //單詞重複3次
Bayron|casper //兩個單詞的或   
Bayr(on|ca)sper //中間兩個字母隨便出現哪一個都行,注意同時出現兩個是不匹配的
'Bayroncasper'.replace(/Bayr(on|ca)sper/g,'x') //"Bayroncasper"
'Bayrcasper'.replace(/Bayr(on|ca)sper/g,'x')  //"x"

前瞻和後顧

正則匹配的方向是從左向右，因此向右是前瞻，向左是後顧，斷言能夠理解爲規則，可是不參與匹配
（正向）前瞻就是在正則表達式匹配到規則的時候，向前檢查是否符合斷言
（正向）後顧就是在正則表達式匹配到規則的時候，向後檢查是否符合斷言
（負向）... 就是正則表達式匹配到規則的時候，向（前）後檢查是否不符合斷言

'Windows2000'.replace(/Windows(?=2000)/g,'x')  //"x2000" 正向前瞻 ?=
'Windows2000'.replace(/Windows(?!2000)/g,'x')  //"windows2000" 負向前瞻 ?!
'I has Windows2000'.replace(/(?<=I has )Windows/g,'x')  //"I has x2000" 正向後顧 ?<=
'I has Windows2000'.replace(/(?<!He has )Windows/g,'x')  //"I has x2000" 負向後顧 ?<!

方法

正則的方法

正則的方法只有兩個，test和exec

exec

一個在字符串中執行查找匹配的RegExp方法，它返回一個數組（未匹配到則返回null）。 與字符串的match對應 數組【匹配值，分組，index,input,】
這裏注意，exec一次只匹配一個，匹配不到就會null。只有給修飾符g才能往下繼續匹配（使用while）

var myRe = new RegExp("d(b+)d", "g");
var myArray = myRe.exec("cdbbdbsbz");
console.log(myArray)
//["dbbd", "bb", index: 1, input: "cdbbdbsbz", groups: undefined]
---------------------------------------------------------------------
var regex1 = RegExp('foo*','g');
var str1 = 'table football, foosball';
var array1;

while ((array1 = regex1.exec(str1)) !== null) {
  console.log(`Found ${array1[0]}. Next starts at ${regex1.lastIndex}.`);
  // expected output: "Found foo. Next starts at 9."
  // expected output: "Found foo. Next starts at 19."
}

test

一個在字符串中測試是否匹配的RegExp方法，它返回true或false。 與字符串的search對應

字符串的方法

search,match

相似test,exec 可是全局調用match相對exec功能弱了一些，返回的數組元素沒有index或者input了

split

很是有用的一個方法，用來按規則分解字符串造成數組

'a1b2c3d4'.split(/\d/g)
// ['a','b','c','d']

replace

很是很是有用的一個方法，全局匹配下因爲能自動不斷匹配，很是方便。
注意若是參數是字符串會隱式轉換爲

'a1b1'.replace('1','x') // axb1   爲何會只替換一次呢，由於這裏會給你隱式的轉換爲正則表達式
'a1b1'.replace(/1/g,'x') // axbx
'a1b1'.replace(/\d/g,function(match){ //匹配字符串，分組（沒有則沒有該參數），index，原字符
    return ~~match + 1
}) // a2b2