JS正則表達式入門，看這篇就夠了

前言

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

驗證QQ號的合法性

/**
*合法qq號規則：一、5-15位；二、全是數字；三、不以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對象自帶的屬性，並不複雜，這裏我就列一下，不展開說了。

屬性	描述
global	RegExp 對象是否具備標誌 g。
ignoreCase	RegExp 對象是否具備標誌 i。
lastIndex	一個整數，標示開始下一次匹配的字符位置。
multiline	RegExp 對象是否具備標誌 m。
source	正則表達式的源文本。

第二步：調用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']

如何寫一個正則表達式

第一次接觸正則表達式同窗們，可能被這個正則表達式的規則弄得迷迷糊糊的，根本無從下手。小編我第一次學這個正則表達式的時候，也是稀裏糊塗，什麼元字符、量詞徹底不知道什麼東西，雲裏霧裏的。後面小編細細研究了一下，總結一套方法，但願能夠幫助你們。

關於正則表達式書寫規則，可查看w3school，上面說的很清楚了，我就不貼出來了。我就闡述一下我寫正則表達式的思路。

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

驗證QQ號的合法性

合法qq號規則：一、5-15位；二、全是數字；三、不以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-658175二、021-86128488

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

這裏會拆成兩個大組合：

一、（數字0，1個）+（數字0~9，3個）+("-"，1個)+（數字1~9，1個）+（數0~9，6個）
二、（數字0，1個）+（數字0~9，2個）+("-"，1個)+（數字1~9，1個）+（數0~9，7個）

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

一、([0-0],{1})+([0-9],{3})+"-"+([1,9],{1})+([0,9],{6})
二、([0-0],{1})+([0-9],{2})+"-"+([1,9],{1})+([0,9],{7})

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

這裏咱們先拼接一個大組合，而後再將大組合拼接起來

一、0[0-9]{3}-[1-9][0-9]{6}
二、0[0-9]{2}-[1-9][0-9]{7}

最後拼接爲：

/(^0[0-9]{3}-[1-9][0-9]{6}$)|(^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']

結語

正則表達式並不難，懂了其中的套路以後，一切都變得簡單了。在最後我想說點題外話，網上不乏一些文章記錄一些經常使用的正則表達式，而後新手前端在使用正則表達式的時候都會直接拿來就用。在這裏我想說一下本身的見解，這些所謂記錄經常使用的正則表達式文章並不是徹底都是正確的，有很多都是錯的。因此同窗們在往後使用的過程儘可能本身寫正則表達式，實在不會了能夠去參考一下，但真的不要照搬下來。咱不說這種會影響本身成長的話，咱就說你抄的必定都是對的嗎？多思考一下，總沒有壞處。