JavaScript正規表示式（2）

前端啟航發表於2018-10-19
JavaScript

前言

在正文開始前，先說說正規表示式是什麼，為什麼要用正規表示式？正規表示式在我個人看來就是一個瀏覽器可以識別的規則，有了這個規則，瀏覽器就可以幫我們判斷某些字元是否符合我們的要求。但是，我們為什麼要使用正規表示式呢？下面我們就看一下下面這個業務場景。

驗證QQ號的合法性

/**
*合法qq號規則：1、5-15位；2、全是數字；3、不以0開頭
*/

//1.在不使用正規表示式的時候，我們可能會這樣判斷QQ號的合法性
var qq="6666666a6666";         
if(qq.length>=5&&qq.length<=15&&!isNaN(qq)&&qq.charCodeAt(0)!=48){
        alert("QQ合法");
    }else{
        alert("QQ不合法")
    }
    
//2.使用正規表示式
    var qq="066336";
    var reg=/^[1-9][0-9]{4,14}$/;
    if(reg.test(qq)){
        alert("QQ合法");
    }else{
        alert("QQ不合法");
    }
複製程式碼

從上面這個例子可以看出來使用了正規表示式的時候，我們的程式碼量變少了，而且比較直觀。如果遇到非常的複雜的匹配，正規表示式的優勢就更加明顯了。

使用方法 接著上面，我想先說說JS正規表示式是如何使用的。非常簡單，只有兩步而已。

第一步：定義一個正規表示式 定義正規表示式有兩種方法，第一種通過"/正規表示式/修飾符"這種形式直接寫出來，第二種通過“new RegExp('正規表示式'，'修飾符)'”建立一個RegExp物件。其中修飾符為可選項，有三個取值g：全域性匹配；i：不區分大小寫；m：多行匹配

//第一種“/正規表示式/”
    var reg1=/hello \w{3,12}/g;
//第二種new RegExp('正規表示式')
    var reg2=new RegExp("hello \\w{3,12}",'g');
    
/**
*這裡需要注意的是,第二種方法中由於字串轉義問題，"\\"代表"\"。
*/   
複製程式碼

上面這個定義方法，其實還有一個可選引數（修飾符），這裡我們先不深入探究，後面我們再細說。

說到RegExp物件，下面要說一下RegExp物件自帶的屬性，並不複雜，這裡我就列一下，不展開說了。

image

第二步：呼叫RegExp物件中的方法 RegExp物件給我們提供了三種方法供我們使用，分別是test()、exec()和compile()。下面具體說一下這三個方法的用處。

1.test() 檢索字串中指定的值。返回 true 或 false。這個是我們平時最常用的方法。

var reg=/hello \w{3,12}/;
 alert(reg.test('hello js'));//false
 alert(reg.test('hello javascript'));//true
複製程式碼

2.exec() 檢索字串中指定的值。匹配成功返回一個陣列，匹配失敗返回null。

var reg=/hello/;
console.log(reg.exec('hellojs'));//['hello']
console.log(reg.exec('javascript'));//null
複製程式碼

3.compile() compile() 方法用於改變 RegExp。 compile() 既可以改變檢索模式，也可以新增或刪除第二個引數。

var reg=/hello/;
console.log(reg.exec('hellojs'));//['hello']
reg.compile('Hello');
console.log(reg.exec('hellojs'));//null
reg.compile('Hello','i');
console.log(reg.exec('hellojs'));//['hello']
複製程式碼

如何寫一個正規表示式 第一次接觸正規表示式同學們，可能被這個正規表示式的規則弄得迷迷糊糊的，根本無從下手。

其實正規表示式都可以拆成一個或多個（取值範圍+量詞）這樣的組合。針對每個組合我們根據JS正規表示式的規則翻譯一遍，然後將每個組合重新拼接一下就好了。下面我們舉個例子來試一下，看看這個方法行不行。

驗證QQ號的合法性 合法qq號規則：1、5-15位；2、全是數字；3、不以0開頭

第一步：拆成（取值範圍+量詞）這樣的組合

根據QQ號的驗證規則，我們可以拆成兩個（取值範圍+量詞）的組合。分別是：

1.（1~9的數字，1個）；2.（0~9的數字，4~14個）
複製程式碼

第二步：根據正規表示式規則翻譯（取值範圍+量詞）

1.（1~9的數字，1個）     =>   [1-9]{1}或者[1-9]
2.（0~9的數字，4~14個）  =>   [0-9]{4,14}
複製程式碼

第三步：將翻譯好的（取值範圍+量詞）組合進行拼接

初學者可能在拼接這一步會犯一個錯誤，可能會組合拼接成這個樣子/[1-9]{1}[0-9]{4,14}/或者簡寫翻譯成/[1-9] [0-9]{4,14}/這些都不對的。呼叫test()方法的時候，你會發現只要一段字串中有符合正規表示式的字串片段都會返回true，童鞋們可以試一下。

var reg=/[1-9][0-9]{4,14}/;
alert(reg.test('0589563'));
//true，雖然有0，但是'589563'片段符合
alert(reg.test('168876726736788999'));
//true,這個字串長度超出15位，達到18位，但是有符合的字串片段
複製程式碼

正確的寫法應該是這樣的：

/^[1-9][0-9]{4,14}$/（用^和$指定起止位置）
複製程式碼

下面我們看一個複雜點的例子：

驗證國內電話號碼 0555-6581752、021-86128488

第一步：拆成（取值範圍+量詞）這樣的組合

這裡會拆成兩個大組合：

1、（數字0，1個）+（數字0~9，3個）+("-"，1個)+（數字1~9，1個）+（數0~9，6個）
2、（數字0，1個）+（數字0~9，2個）+("-"，1個)+（數字1~9，1個）+（數0~9，7個）
複製程式碼

第二步：根據正規表示式規則翻譯（取值範圍+量詞）

1、([0-0],{1})+([0-9],{3})+"-"+([1,9],{1})+([0,9],{6})
2、([0-0],{1})+([0-9],{2})+"-"+([1,9],{1})+([0,9],{7})
複製程式碼

第三步：將翻譯好的（取值範圍+量詞）組合進行拼接

這裡我們先拼接一個大組合，然後再將大組合拼接起來

1、0[0-9]{3}-[1-9][0-9]{6}
2、0[0-9]{2}-[1-9][0-9]{7}
複製程式碼

正規表示式擴充 除了RegExp物件提供方法之外，String物件也提供了四個方法來使用正規表示式。

1.match() 在字串內檢索指定的值,匹配成功返回存放匹配結果的陣列，否則返回null。這裡需要注意的一點事，如果沒有設定全域性匹配g，返回的陣列只存第一個成功匹配的值。

var reg1=/javascript/i;
var reg2=/javascript/ig;
console.log('hello Javascript Javascript Javascript'.match(reg1));
//['Javascript']
console.log('hello Javascript Javascript Javascript'.match(reg2));
//['Javascript','Javascript','Javascript']
複製程式碼

2.search() 在字串內檢索指定的值,匹配成功返回第一個匹配成功的字串片段開始的位置，否則返回-1。

var reg=/javascript/i;
console.log('hello Javascript Javascript Javascript'.search(reg));//6
複製程式碼

3.replace() 替換與正規表示式匹配的子串，並返回替換後的字串。在不設定全域性匹配g的時候，只替換第一個匹配成功的字串片段。


var reg1=/javascript/i;
var reg2=/javascript/ig;
console.log('hello Javascript Javascript Javascript'.replace(reg1,'js'));
//hello js Javascript Javascript
console.log('hello Javascript Javascript Javascript'.replace(reg2,'js'));
//hello js js js
複製程式碼

4.split() 把一個字串分割成字串陣列。

var reg=/1[2,3]8/;
console.log('hello128Javascript138Javascript178Javascript'.split(reg));
//['hello','Javascript','Javascript178Javascript']
複製程式碼

結語

正規表示式並不難，懂了其中的套路之後，一切都變得簡單了。在最後我想說點題外話，網上不乏一些文章記錄一些常用的正規表示式，然後新手前端在使用正規表示式的時候都會直接拿來就用。在這裡我想說一下自己的看法，這些所謂記錄常用的正規表示式文章並非完全都是正確的，有不少都是錯的。所以同學們在日後使用的過程儘量自己寫正規表示式，實在不會了可以去參考一下，但真的不要照搬下來。我們不說這種會影響自己成長的話，我們就說你抄的一定都是對的嗎？多思考一下，總沒有壞處。

這裡推薦一下我的前端學習交流群：784783012，裡面都是學習前端的，如果你想製作酷炫的網頁，想學習程式設計。自己整理了一份2018最全面前端學習資料，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴，有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入學習。

相關文章