原文連結

從今天開始關於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]、[[email protected]#%]都是字元組

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

元字元

元字元是相對於普通字元來說的,