從 例子 開始 入門 正則 表達式（-）

正則入門

  正則 是個難啃的骨頭，之前看着會正則的人 感受都好牛逼。因而工做了2年了終於鼓起勇氣啃這個骨頭了。。

例子入手

  首先咱們先看下相關的字符表明。咱們先看這個例子。這個🌰就是驗證字符串是不是數字。

let regex = /^[0-9]+$/;
let number = '123';
let string = 'abc';
regex.test(number); // true
regex.test(string); // false
複製代碼

可能不少人這時用到了百度谷歌一下而後複製過去直接用就OK了，可是這樣沉澱不到東西，因此咱們來靜下心看看這個正則到底什麼意思，首先咱們要了解的是相關的

• ^ ：脫字符，匹配開頭，在多行匹配中匹配行開頭，有時也表示求反的概念。
• $ :美圓符號, 匹配結尾，在多行匹配中匹配行結尾。
• {m,} 表示至少出現m次。
• {m} 等價於{m,m}，表示出現m次。
• +: 等價於{1,}，表示出現至少一次。記憶方式：加號是追加的意思，得先有一個，而後才考慮追加。
• *:等價於{0,}，表示出現任意次，有可能不出現。記憶方式：看看天上的星星，可能一顆沒有，可能零散有幾顆，可能數也數不過來。

可能這時你有些不理解 [0-9]，其實他等價於 [0123456789] ，在正則裏能夠縮寫因此爲 [0-9], 同理[a-z],[A-Z]也是一樣的道理。爲何使用正則由於他書寫簡單，咱們還能夠簡化，讓咱們等下看看接下來的這些字符，思考下怎麼繼續簡化。

那咱們大概能猜到這個意思表明什麼了，從 開頭(^) 到 結尾($) 0-9([0-9]) 出現 至少一次 (+) , 因此就很好理解了，爲何這個是驗證數字的想必就能理解了。
接下來咱們再來看一些特殊字符：

• \d就是[0-9]。表示是一位數字。記憶方式：其英文是digit（數字）。
• \D就是[^0-9]。表示除數字外的任意字符。
• \w就是[0-9a-zA-Z_]。表示數字、大小寫字母和下劃線。記憶方式：w是word的簡寫，也稱單詞字符。
• \W是[^0-9a-zA-Z_]。非單詞字符。
• \s是[ \t\v\n\r\f]。表示空白符，包括空格、水平製表符、垂直製表符、換行符、回車符、換頁符。記憶方式：s是space character的首字母。
• \S是[^ \t\v\n\r\f]。 非空白符。
• .就是[^\n\r\u2028\u2029]。通配符，表示幾乎任意字符。換行符、回車符、行分隔符和段分隔符除外。記憶方式：想一想省略號...中的每一個點，均可以理解成佔位符，表示任何相似的東西。

  好的咱們看到了 \d 其實就是 [0-9]，此時突然恍然大悟，原來上面的正則還能簡化：

let regex = /^\d+$/; // /^[0-9]+$/;
複製代碼

這時咱們大概 已經懂得這個正則表明什麼東西了，以後再出現驗證用戶輸入的是否是數字，就別再百度了，分分鐘就寫出來。

觸類旁通

  咱們已經瞭解以前的這個例子後，大概能推敲如何實現驗證全是字母：

let regex = /^[a-z]+$/;
let string = 'abc';
let number = '123';
regex.test(number); //false
regex.test(string);//true
複製代碼

正則是區分大小寫字母的，因此，咱們要驗證大寫字母的時大概是這樣：

let regex = /^[A-Z]+$/;
let string = 'abc';
let STRING = 'ABC'
let number = '123';
regex.test(number); //false
regex.test(string);//false
regex.test(STRING); //true
複製代碼

好了咱們已經反二了，接下來咱們來反三，便是大寫字母又是小寫字母，怎麼去寫？

let regex = /^[a-zA-Z]+$/
複製代碼

估計到這裏咱們都已經算入門了，不是很複雜的正則均可以本身去寫了。

考驗

接下來咱們來看一些經常使用需求：

正則 驗證 手機 。

手機號碼是幾位，emmmm，等下我先數數 183 XXX XXX XX ,噗，11位，好吧當我沒說。那咱們分析下，手機號, 首先所有都是數字， 開頭第一位必定是 數字 1 ，而後只要知足 11位就能夠了，咱們已經把需求整理清楚了，若是咱們用 js 去寫會怎麼寫？我這裏隨意寫一寫,可能有更好的方式

const isPhone = (number) => {
    const len = number.length;
    if (typeof number !== 'string' || len !== 11  || number[0] !== '1') {
        return false;
    }

    for (let i = 0; i < len; i++) {
        if (isNaN(number[i])) return false;
    }

    return true;
}

console.log(IsPhone('18367490590')); //true


複製代碼

可見一個 js 書寫是多麼麻煩，也多是個人解決方式不是很牛逼，隨便寫寫，各位有什麼好的解決方案也能夠給我評論。。扯遠了。如今咱們來看看要是用正則怎麼寫？

let regex  = /^1\d{10}$/;
複製代碼

一行代碼搞定。就是這麼簡單，讓咱們分析一下。

• ^ 開頭匹配
• 1 開頭沒毛病
• \d 表示 [0-9] 表明必須是數字
• {10} 也是 {10, 10} 表示 [0-9]出現10次，加上1 也就是說 11位。
• $ 結尾匹配沒毛病。 以上一行代碼就搞定了。很簡便其實分析下也不是很難。

正則 驗證 郵箱 。

我就不寫什麼 js 的版本了，有興趣的同窗能夠本身嘗試寫寫。咱們看看郵箱的正則應該是有這麼幾個需求的：

• xxx@xxx.xxx
• @ 前須要有任意字符
• 郵箱 有 @ 符號。
• @後有任意字符
• 要有 .
• . 後跟任意字符

let regex = /^\w+@\w+\.\w+/;
複製代碼

簡單分析一下：

• \w咱們知道是[0-9a-zA-Z_]下劃線
• + 表明至少出現一次 比如 {1,}
• @ 必須須要。
• . 這裏要注意下，由於 . 是特殊正則字符, 表明通配符， 咱們這裏須要的是 "." 字符串，因此加了 \ 進行轉譯

補充案例

  以前的例子們大概動了一些東西，讓咱們再來看幾個例子。

匹配16進制顏色值

大概是這樣：

#ffbbad #Fc01DF #FFF #ffE

寫法：

let regex = /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g;
複製代碼

分析：
開頭是#號，表示一個16進制字符，能夠用字符組[0-9a-fA-F]。而後 {6} 表明 出現6 次，這時候你可能有點迷 這個表明什麼 稍等引出這個 | 是分支的概念。再說說後面其實也很好理解 字符組[0-9a-fA-F] 出現3次。

• | 分支，其實能夠理解爲這個是編程中的或，很容易理解了。那麼，咱們知道或者是惰性的，一個成立不向下執行，這裏其實也同樣。

讓咱們再來一個案例：

驗證 匹配 yyyy-mm-dd ： 2018-10-20

正則以下：

var regex = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
複製代碼

分析一波:

• 年 \d{4} [0-9]出現4次。
• 月 共12個月， 十位0的話就是 [1-9]月,十位1的話就是 [0-2]個月。
• 日 最多31天 ，十位0的話就是 [1-9]天，十位1，十位2就是[0-9] 3的話只有0或者1。

結語。

正則是個大工程這裏只是一些簡單的正則，好比還有惰性匹配等 咱們尚未見到， 在後面的系列中我會慢慢的加入進去。未完...