深刻淺出，手把手教你編寫正則表達式

平常代碼的開發中，你們都或多或少的碰到一些正則表達式，但有的朋友只是會用，或者大體明白，但願這篇對正則深刻淺出的文章可以讓你們有所收穫。

基本語法

[xyz]     一個字符集，匹配任意一個包含的字符
[^xyz]    一個否認字符集，匹配任何爲包含的字符
\w (小寫) 匹配字母或數字或者下劃線的字符
\W (大寫) 匹配不是字母，數字，下劃線的字符
\s (小寫) 匹配任意空白符
\S (大寫) 匹配不是空白符的字符
\d (小寫) 匹配數字
\D (大寫) 匹配非數字的字符
\b (小寫) 匹配單詞的開始或結束的位置
\B (大寫) 匹配不是單詞開頭或結束的位置
 $        匹配字符串的結束
 ^        匹配字符串的開始
 .        匹配全部，除了換行符
 -        重複0次或更屢次
 -        重複1次或更屢次
 ?        重複0次或一次
 {n}      重複n次
 {n,}     重複n次或更屢次
 {n, m}   重複n次到m次
等更多.........

更多語法能夠在W3C正則裏查看

匹配位置

須要強調一下匹配位置的幾個語法, 後面會一一舉例說明
^ 匹配字符串的開始
$ 匹配字符串的結尾
(?=pattern) 正向前瞻，字符串匹配知足條件的位置
(?!pattern) 負向前瞻，字符串匹配知足條件的位置

經常使用方法和屬性

---

正則表達式的寫法有兩種

var reg = new RegExp('/1/')
var reg = /1/

reg是正則對象的實例，經過console.dir打印對象，咱們能看到實例上面的屬性和方法。

• 經常使用的方法

舉個簡單的例子，咱們來了解下test()和exec()的區別和使用場景。

var reg = /1/, reg1 = /(1)/
reg.test(1111) // true
reg.test(222) // false
reg.exec(11112) // ["1", index: 0, input: "11112"]
reg1.exec(11112) // ['1111', '1', index: 0, input: '11112']
reg1.exec(222) // null

test驗證後會返回一個布爾值，主要用於驗證是否匹配，exec則在驗證成功後返回一個相似數組的對象，主要用於捕獲分組，失敗則返回null。

reg1是一個匹配(1)分組的正則，使用exec匹配成功後返回['1111', '1', index: 0, input: '11112']，input是輸入的值，第一項是匹配知足條件的數據，第二項是匹配到的分組，若是沒有分組，第二項則不存在,index屬性則表示從第幾項開始匹配到。
關於分組的話在下面會有詳細的例子說明。

• 經常使用的屬性

ignoreCase 忽略大小寫，默認爲false
 global     全局匹配，默認爲false
 multiline  在有換行的時候，能夠獲得換行的起始位置和終止位置，默認爲false

匹配規則

正則表達式(regular expression)描述了一種字符串匹配的模式，能夠用來檢查一個串是否含有某種子串、將匹配的子串作替換或者從某個串中取出符合某個條件的子串等

噹噹看描述和說明文檔可能有點太官方化了，先假設咱們已經都瞭解了正則匹配的基本語法和大體的使用，接下來這裏用簡淺的例子一步一步來分析怎樣去實現本身須要的正則表達式。

• 例子： 手機號碼

首先舉個例子，要匹配一個手機號碼。先分析一下手機號碼有什麼樣的規則呢，1開頭，必須爲數字，並且總共長度爲十一位，那咱們就有了下面這個表達式：

var reg = /^1[0-9]{10}$/ // 根據正則語法 ^爲匹配開始，^1就表示第一位必須爲1開頭，[0-9]指的是必須爲0-9的數字，{10}表示重複次數爲10，$結束符。簡單的匹配規則完成。

好像有點粗糙，通常手機號碼第二位是不會有0-9這麼多的可能的，因此咱們須要在優化一下，第一位爲1，第二位爲[3,5,8,7]：

var reg = /^1[3,5,8,7]{1}[0-9]{9}$/ // 根據正則語法 ^爲匹配開始，^1就表示第一位必須爲1開頭，[3,5,8,7]指的是匹配其中任一數字，{1}表示重複次數爲1，前兩位匹配完成，加上後面的[0-9],{9}重複九次，$結束符。簡單的匹配規則完成。

這樣，基本的一個手機號碼的正則匹配規則就出來了，若是本身業務有需求，作相對應的改動就能夠了。

• 例子：郵箱

和手機號碼的規則相比較，郵箱的匹配規則稍微複雜一點。一樣，咱們先分析郵箱的規則，好比QQ郵箱，110@qq.com，先有字符，長度大於1，而後是@，後面再跟着一串字符長度大於1，那咱們就能夠獲得這樣一個的表達式：

var reg = /^[\w\.]+@[\w.]+$/ // [\w\.] \w匹配字母或數字或者下劃線的字符，\.經過轉義符表示匹配.,+表示重複一次或更屢次，匹配@符號，而後又是一樣的\w\.匹配一次或更屢次。

• 例子：網站

一樣是分析網站規則，http(s)://segmentfault.com/1233, 首先多是http協議或者https協議，而後是://，而後是字符串。這樣一分析，再把對應的正則語法理一理，很快一個匹配規則就出來了：

var reg = /^https?:\/\/.+$/ // 首先會是http開頭，^http, 而後s跟隨?表示匹配0次或一次，:,//須要用\轉義，後面跟隨各類類型的不肯定因素.+，固然，若是咱們要作的更精確的匹配，則能夠修改爲本身的規則便可。

舉了幾個基本的例子，讓咱們去複習鞏固正則的基本使用和匹配規則，首先分析要匹配的規則是什麼，而後一步一步去把規則拼積木同樣拼進去，就能夠了，本身多定義一些不同的規則而後去一個一個實現，就會發現若是隻是基本的使用，遠沒有想象中的難。

分組

分組的就是把要匹配的規則分紅一個組，寫在()裏，好比匹配數字(0-9)，匹配字母(0-z),主要有分爲捕獲型分組和非捕獲型分組。

• 捕獲型分組

先來講說捕獲型分組。主要能夠乾的事情有兩個，引用和反向引用，在一些稍微複雜的正則表達式裏，咱們經常會用到這些。

• 捕獲型分組-引用

在每次分組捕獲以後，RegExp對象上面能夠拿到最近捕獲到的分組，下面來舉一些例子：

var reg = /(1)(3)/ // 兩個分組
reg.exec(123134) // 捕獲到了兩個分組
console.log(RegExp.$1) // 1
console.log(RegExp.$2) // 3

獲得到了最近捕獲的分組，但是每每咱們不明白捕獲到了分組有什麼用，下面舉個例子,將全部的html標籤替換成p標籤，來講明捕獲到的分組怎麼去引用。
首先咱們分析一下這個匹配的規則，開始標籤爲<字符串>，結束標籤爲</字符串>，咱們只須要把這些替換爲<P> </p> 就能夠了。

var str = '<span>1234</span><div>456</div>'
var reg = /<(\/?)(\w+)>/g  // 先匹配<,而後(/?)重複0或一次，而後匹配\w+,匹配>，結束。
str.replace(reg, '<$1p>')  // 字符串的替換方法,這裏使用了$1，就是RegExp.$1，引用正則裏面的分組(\/?)，
                           // 因此<$1p>中的$1則爲動態捕獲到的分組。當標籤爲</元素>時，RegExp.$1爲/,
                           // 字符串中用</p>替換原來標籤，
                           // 則達到了將html字符串中開始標籤和閉合標籤所有替換的效果

• 捕獲型分組-反向引用

反向引用也是同樣將捕獲到的分組引用，不過是在編寫的正則裏面，經過/1,/2,/3能夠獲得當前捕獲到的分組.

• 非捕獲型分組

(?:)即表示該分組不能被捕獲，以後在引用的時候是引用不到這個分組的。

貪婪匹配和惰性匹配

正向前瞻和負向前瞻