從今天起開啓對正則表達式的學習

原文連接

從今天開始關於webpack的討論就告一段落了，若是遇到webpack有重大更新，我會隨時更新，請對我保持持續關注。
每次遇到與表單驗證和校驗的相關問題都會很難避免的卡住，是時候攻克一下這個問題
從今天開始進入對javascript正則表達式的學習

前期準備

爲了本地調試方便咱們先安裝本地服務器

npm install http-server -g

而後新建一個html文件
啓動服務

http-server

必備知識點

建立正則表達式

javascript正則表達是的建立有兩種方式

1. 最多見的 就這這種，首尾用兩個斜線/分隔符，例如

var reg = /\d/

1. 實例化

var reg=new RegExp("\\d");//和上面等價
var reg=new RegExp(/\d/);//等價

new RegExp("\d")，使用字符串建立，一個反斜線用來轉義d==>d,一個反斜線用來轉義另外一個反斜線即==>\
固然最經常使用的仍是用兩個反斜線建立正則表達式
javascript的正則表達式是RegExp，
RegExp是javascript的內置構造函數，即存在protoytpe，能夠翻看以前的js原型系列文章查看，我看看下RegExp的原型對象

console.log(RegExp.prototype)

輸出

咱們重點看test()和exec()這個方法

正則表達式內置方法test()

RegExp.prototype.test(String)是RegExp原型對象上的內置方法，咱們能夠直接使用，它返回一個布爾類型的值，是否在參數String中找到匹配項
並非要求整個sring都由表達式匹配，若是要檢測整個string有表達式匹配須要在表達式兩端添加^和$,
感覺一下的

console.log(/\w/.test(1)); //=>true
console.log(/\d/.test("1")); //=>true
console.log(/\d/.test("q1"));    //=>true
console.log(/^\d$/.test("q1"));//=>fase

test()中的參數爲string類型，若是不是string類型，會被轉正string類型

console.log(/\w/.test(1));//=>true
console.log(/\w/.test("1"));//=>true

正則表達式內置方法exec()

提到exec(),就不得不提match(),他們很類似

match是字符串方法，寫法爲：str.match(reg)
exec是正則表達式方法，寫法爲：reg.exec(str)

異同

match和exec在匹配成功時返回的都是數組，在沒有匹配上時返回的都是null

var s = "aaa bbb ccc";
var reg = /\b\w+\b/;
var rs_match = s.match(reg);
var rs_exec = reg.exec(s);
console.log("match:", rs_match);
console.log("exec:", rs_exec);

看輸出：是相同的

當不使用全局匹配時，二者的匹配效果是同樣的，僅返回第一次匹配成功的結果
繼續看代碼

var s = "aaa bbb ccc";
var reg = /\b\w+\b/g;
var rs_match = s.match(reg);
var rs_exec = reg.exec(s);
console.log("match:", rs_match);
console.log("exec:", rs_exec);

看輸出：是不一樣的

繼續

var s = "aaa bbb ccc";
var reg = /\b\w+\b/g; //有g
var rs_match1 = s.match(reg);
var rs_match2 = s.match(reg);
var rs_exec1 = reg.exec(s);
var rs_exec2 = reg.exec(s);
var rs_exec3 = reg.exec(s);
var rs_exec4 = reg.exec(s);
console.log("match1:", rs_match1);
console.log("match2:", rs_match1);
console.log("exec1:", rs_exec1);
console.log("exec2:", rs_exec2);
console.log("exec3:", rs_exec3);
console.log("exec4:", rs_exec4);

看輸出

當使用全局匹配時，二者的匹配結果出現區別

• 全局匹配時，match會返回全部匹配上的內容；而exec僅匹配單次匹配上的內容
• 全局匹配且進行屢次匹配時，exec會從上次匹配結束的下一位開始匹配，返回本次匹配上的內容，直至無能夠匹配的內容，返回null

分組
無全局匹配分組時，match和exec返回結果相同。因爲正則表達式採用了括號分組，因此在返回匹配結果的同時，依次返回該結果的全部分組：

var s = "aaa1 bbb2 ccc3";
var reg = /\b(\w+)(\d{1})\b/;//兩個分組，無g
var rs_match1 = s.match(reg);
var rs_match2 = s.match(reg);
var rs_exec1 = reg.exec(s);
var rs_exec2 = reg.exec(s);
console.log("match1:",rs_match1);
console.log("match2:",rs_match1);
console.log("exec1:",rs_exec1);
console.log("exec2:",rs_exec2);

輸出

　全局匹配分組時，match和exec返回結果不一樣。match會返回全部匹配到的結果；而exec會返回本次匹配到的結果，若表達式中出現分組，則會依次返回本次匹配的所有分組：

var s = "aaa1 bbb2 ccc3";
var reg = /\b(\w+)(\d{1})\b/g;
var rs_match1 = s.match(reg);
var rs_match2 = s.match(reg);
var rs_exec1 = reg.exec(s);
var rs_exec2 = reg.exec(s);
var rs_exec3 = reg.exec(s);
var rs_exec4 = reg.exec(s);
console.log("match1:",rs_match1);
console.log("match2:",rs_match1);
console.log("exec1:",rs_exec1);
console.log("exec2:",rs_exec2);
console.log("exec3:",rs_exec3);
console.log("exec4:",rs_exec4);

基本概念

普通字符

普通字符是正則表達式的基礎，字符組，就是一組字符，標示在同一個位置可能出現的各類字符，寫法是在[和]之間列出全部可能出現的字符，像[ab]、[1234]、[!@#%]都是字符組

console.log(/moshanghan/.test("moshanghan"));//=>true
console.log(/[abc]/.test("a"));//=>true
console.log(/[abc]/.test("b"));//=>true
console.log(/[0-9]/.test(0));//=>true

元字符

元字符是相對於普通字符來講的,👆的一個🌰，

console.log(/[0-9]/.test(0));//=>true

字符組中的中劃線「-」並不能匹配「-」字符

console.log(/[0-9]/.test("-"));//=>false

這個「-」是用來表示範圍的，這類字符叫作元字符，

/^[0-9]$/.test("0")//=>true

👆上面代碼中的^$都是元字符，在正則匹配中他們有着特殊的意義，這就是元字符,屬於範圍類字符
( [ { ^ $ | ) ? * + .
「-」有點特別，當它緊挨着[而且在它右側的時候，它就是普通字符，當它在其餘位置的時候就是元字符
舉個🌰

console.log(/[0-9]/.test('-'));//=>false
console.log(/[-0-9]/.test("-"));//=>true

轉義符

有時候咱們不須要表示這種特殊的意義，就是想單純的匹配^或者$等字符，元字符前面加反斜線表示轉義符

console.log(/[0\-9]/.test("-"));//=>true

預約義的特殊字符

字符	正則	描述
t	/\t/	製表符
n	/\n/	換行符
t	/\t/	回車符
f	/\f/	換頁符
a	/\a/	alert字符
e	/\e/	escape字符
cX	/\cX/	與X相對應的控制字符
b	/\b/	與回退字符
v	/\v/	垂直製表符
0	/\0/	空字符

取反

前面加個元字符進行取反，表示匹配不能爲括號裏面的字符。

console.log(/[^abc]/.test("a"));//=>false
console.log(/[^abc]/.test("b"));//=>false
console.log(/[^abc]/.test("6"));//=>true
console.log(/[^abc]/.test("gg"));//=>true

範圍

範圍👆說過

console.log(/[0-9]/.test('-'));//=>false
console.log(/[a-z]/.test("a"));//=>true

組合

容許用中括號匹配不一樣類型的單個字符。

console.log(/[a-m1-5\n]/.test(a))//true

預約義

. :除了換行和回車以外的任意字符,
d:數字字符
D: 非數字字符
s: 空白字符
S:非空白字符
w: 單詞字符(全部的字母)⚠️包含下劃線_
W: 非單詞字符

數量

?：出現零次或一次
*：出現零次或無限屢次
+：出現一次或無限屢次（至少一次）
{n}：對應零次或者n次
{n,m}：至少出現n次但不超過m次
{n,}：至少出現n次(+的升級版)

邊界

^：開頭 ⚠️注意不能緊跟於左中括號的後面，在左中括號的後面就是取反了，要區分
$：結尾
b：單詞邊界 指[a-zA-Z_0-9]以外的字符
B：非單詞邊界

實例的屬性

• global 標示正則表達式是否指定了全局模式g（只讀）
• ignoreCase 標示正則表達式是否指定了不區分大小寫模式i（只讀）
• mutiline 標示正則表達式是否指定了多行模式m（只讀）
• lastIndex 若是使用了全局模式，這個變量保存的是在字符串中嘗試下次的匹配的偏移值，在test()和exec()中會用到這個值（可寫）
• source 返回建立RegExp對象實例時指定的表達式文本字符串。（只讀）

參考連接
javascript正則表達式