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

bitkylin 發布于2019-08-30 15:55 / 3080人閱讀

摘要：日常代碼的開發中，大家都或多或少的碰到一些正則表達式，但有的朋友只是會用，或者大致明白，希望這篇對正則深入淺出的文章能夠讓大家有所收獲。主要可以干的事情有兩個，引用和反向引用，在一些稍微復雜的正則表達式里，我們常常會用到這些。

日常代碼的開發中，大家都或多或少的碰到一些正則表達式，但有的朋友只是會用，或者大致明白，希望這篇對正則深入淺出的文章能夠讓大家有所收獲。

基本語法

[xyz]     一個字符集，匹配任意一個包含的字符
[^xyz]    一個否定字符集，匹配任何為包含的字符
w (小寫) 匹配字母或數字或者下劃線的字符
W (大寫) 匹配不是字母，數字，下劃線的字符
s (小寫) 匹配任意空白符
S (大寫) 匹配不是空白符的字符
d (小寫) 匹配數字
D (大寫) 匹配非數字的字符
 (小寫) 匹配單詞的開始或結束的位置
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標簽，來說明捕獲到的分組怎么去引用。
首先我們分析一下這個匹配的規則，開始標簽為<字符串>，結束標簽為，我們只需要把這些替換為

就可以了。

var str = "1234456"
var reg = /<(/?)(w+)>/g  // 先匹配<,然后(/?)重復0或一次，然后匹配w+,匹配>，結束。
str.replace(reg, "<$1p>")  // 字符串的替換方法,這里使用了$1，就是RegExp.$1，引用正則里面的分組(/?)，
                           // 所以<$1p>中的$1則為動態捕獲到的分組。當標簽為時，RegExp.$1為/,
                           // 字符串中用替換原來標簽，
                           // 則達到了將html字符串中開始標簽和閉合標簽全部替換的效果

捕獲型分組-反向引用

反向引用也是一樣將捕獲到的分組引用，不過是在編寫的正則里面，通過/1,/2,/3可以得到當前捕獲到的分組.

非捕獲型分組

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

貪婪匹配和惰性匹配 正向前瞻和負向前瞻

云服務器 GPU云服務器手把手教你做圖像識別手把手教你阿里云服務器搭建商城正則正則表達式正則匹配正則表達式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117235.html

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

摘要：日常代碼的開發中，大家都或多或少的碰到一些正則表達式，但有的朋友只是會用，或者大致明白，希望這篇對正則深入淺出的文章能夠讓大家有所收獲。主要可以干的事情有兩個，引用和反向引用，在一些稍微復雜的正則表達式里，我們常常會用到這些。日常代碼的開發中，大家都或多或少的碰到一些正則表達式，但有的朋友只是會用，或者大致明白，希望這篇對正則深入淺出的文章能夠讓大家有所收獲。基本語法 [xyz] ...

andot 2019-08-02 14:05 評論0 收藏0
深入淺出，手把手教你編寫正則表達式

摘要：日常代碼的開發中，大家都或多或少的碰到一些正則表達式，但有的朋友只是會用，或者大致明白，希望這篇對正則深入淺出的文章能夠讓大家有所收獲。主要可以干的事情有兩個，引用和反向引用，在一些稍微復雜的正則表達式里，我們常常會用到這些。日常代碼的開發中，大家都或多或少的碰到一些正則表達式，但有的朋友只是會用，或者大致明白，希望這篇對正則深入淺出的文章能夠讓大家有所收獲。基本語法 [xyz] ...

Jackwoo 2019-08-23 14:40 評論0 收藏0
只有20行Javascript代碼！手把手教你寫一個頁面模板引擎

摘要：整個引擎實現只有不到行代碼。不知道你有木有聽說過一個基于的頁面預處理器，叫做。最初我只是打算寫一個的預處理器，不過后來擴展到了和，可以用來把代碼轉成和代碼。最后一個改進可以使我們的模板引擎更為強大。導讀：AbsurdJS 作者寫的一篇教程，一步步教你怎樣用 Javascript 實現一個純客戶端的模板引擎。整個引擎實現只有不到 20 行代碼。如果你能從頭看到尾的話，還能有不少收獲的。...

Luosunce 2019-08-21 12:09 評論0 收藏0
PHP小知識點

摘要：那些瑣碎的知識點作者記錄的的很奇特很難記的知識點。易錯知識點整理注意和的區別中和都是輸出的作用，但是兩者之間還是有細微的差別。今天手頭不忙，總結一下，分享過程中掌握的知識點。深入理解 PHP 之：Nginx 與 FPM 的工作機制這篇文章從 Nginx 與 FPM 的工作機制出發，探討配置背后的原理，讓我們真正理解 Nginx 與 PHP 是如何協同工作的。 PHP 那些瑣碎的知識...

hover_lew 2019-06-28 14:35 評論0 收藏0
深入理解js

摘要：詳解十大常用設計模式力薦深度好文深入理解大設計模式收集各種疑難雜癥的問題集錦關于，工作和學習過程中遇到過許多問題，也解答過許多別人的問題。介紹了的內存管理。延遲加載 (Lazyload) 三種實現方式延遲加載也稱為惰性加載，即在長網頁中延遲加載圖像。用戶滾動到它們之前，視口外的圖像不會加載。本文詳細介紹了三種延遲加載的實現方式。詳解 Javascript十大常用設計模式力薦~ ...

caikeal 2019-08-26 11:39 評論0 收藏0