JavaScript中的王者——正則匹配及15個經常使用案例

各位小可愛們，大家的柳貓又雙叒叕回來啦~今天給你們分享的是JavaScript中最爲嬌小的王者：正則匹配。

首先咱們來康康什麼是正則匹配：

正則表達式（regular expression）是一個描述字符模式的對象。使用正則表達式能夠進行強大的模式匹配和文本檢索與替換功能。

1、建立正則表達式

建立正則表達式和建立字符串類似，建立正則表達式提供了兩種方法，一種採用new運算符，另外一種採用字面量方式。

var box = new RegExp('box'); //第一個參數字符串
var box = new RegExp('box','ig'); //第二個參數可選模式修飾符

參數	含義
i	忽略大小寫
g	全局匹配
m	多行匹配

var box = /Box/; //使用字面量方式的正則
var box = /Box/ig; //第二個斜槓後加模式修飾符

2、測試正則表達式

• RegExp對象包含兩個經常使用方法：test()和exec()，功能基本類似，用於測試字符串匹配。

• test()方法在字符串中查找是否存在指定的正則表達式，並返回布爾值，若是存在則返回true，不然返回false。

• exec()方法也用於在字符串中查找指定正則表達式，若是exec()執行成功，則返回包含該查找字符串的相關信息數據，不然返回null。（返回結果數組）

var pattern = new RegExp('Box','i');
var str = 'box';
alert(pattern.test(str)); //true
var pattern = /Box/i;
var str = 'box';
alert(pattern.test(str)); //true
var pattern = /Box/i;
var str = 'This is a box';
alert(pattern.test(str)); //true
var pattern = /Box/i;
var str = 'box';
alert(pattern.exec(str)); //box返回的是數組，有就返回數組的值，沒有匹配到就返回null
var str ='ss';
alert(pattern.exec(str)); //沒有匹配到返回null

3、使用字符串的正則表達式方法

string對象也提供了4個使用正則表達式的方法

方法	含義
match(pattern)	在一個字符串中尋找一個與正則表達式模式（pattern）的匹配/返回pattern中的字串或者null
replace(pattern,replacement)	用replacement替換pattern
search(pattern)	返回與正則表達式(pattern)的匹配
split(pattern)	返回字符串按指定pattern拆分的數組

var pattern = /Box/ig; //開啓全局
var str = 'This is a Box';
alert(str.match(pattern)); //匹配全部
var pattern = /box/ig;
var str = 'This is a box! That is a Box too!';
alert(str.replace(pattern,'supperman'));
//This is a supperman! That is a supperman too';
var pattern= /!/ig;
alert(str.split(pattern)); //This is a supperman!, That is a supperman too !,

RegExp對象的屬性

屬性	意義
$1(到$9)	圓括號包圍的字符串匹配
$_	至關於input
$*	至關於multiline
$&	至關於lastMatch
$+	至關於lastParen
$`	至關於leftContext
$’	至關於rightContext
constructor	指定建立對象原型的函數
global	全局搜索（使用g修飾符）
ignoreCase	不區分大小寫搜索（使用i修飾符）
input	若是沒有傳遞字符串，這就是要搜索的字符串
lastIndex	繼續匹配的起始位置
lastMatch	最後一個匹配的字符串
lastParen	最後的圓括號包圍的子字符串匹配
leftContext	最近一個匹配字符串左邊的子字符串
multiline	是否跨多行搜索字符串
prototype	容許在全部對象中添加屬性
rightContext	最近一個匹配字符串右邊的子字符串
source	正則表達式模式自己
JavaScript	元字符

正則表達式元字符是包含特殊含義的字符，他們有一些功能，能夠控制匹配模式的方式，反斜槓後的元字符將失去其特殊含義。

在字面意義和特殊意義之間進行切換。例如w表示w的特殊意義而不是字面值w,可是KaTeX parse error: Expected 'EOF', got '表' at position 1: 表̲示不使用的特殊意義而是使用$字符自己。

元字符/元符號	匹配\
^	字符串的開頭
$	字符串的結尾
*	零次或者屢次
+	一次或者屢次
?	零次或者一次
.	除換行符外的任何字符
\b	單詞邊界
\B	非單詞邊界
\d	0-9的任何數字（與[0-9]相同）
D	任何非數字
\f	換頁符
\n	換行符
\r	回車符
\s	任何一個空白字符（與[fnrtv]相同）
\S	任何一個非空白字符
\t	製表符
\v	垂直製表符
\w	任何字母、數字以及下劃線（與[a-zA-Z0-9_]相同）
\W	除數字、字母及下劃線外的其餘字符
\xnn	十六進制數字nn定義的ASCII字符
\onn	八進制數字nn定義的ASCII字符
\cX	控制字符X
[abcde]	與其中任何字符匹配的字符串
[^abcde]	字符補集，與其中任何字符都不匹配的字符集
[a-e]	與其中的字符範圍匹配的字符集
[\b]	退格字符的字面量意義（不一樣於b）
{n}	前面的字符正好出現n次
{n,}	前面的字符至少出現n次
{m,n}	前面的字符至少出現m次，最多n次
()	一個組，能夠在後面引用它
x	y
o+	表示1個或者多個o
x?	表示0個或者1個x
x*	表示0個或者多個x
(xyz)+	匹配至少一個(xyz)
x{m,n}	匹配至少m個，最多n個x

4、15個Js正則匹配經常使用案例

看完這麼多基本的正則表達式規則，相信有許多小可愛和柳貓同樣頭疼，這麼多規則到底該怎麼用呢？接下來，跟柳貓一塊兒康康~

在表單驗證中，使用正則表達式來驗證正確與否是一個很頻繁的操做，下面柳貓將分享15個經常使用的javaScript正則表達式，其中包括用戶名、密碼強度、整數、數字、電子郵件地址（Email、手機號碼、身份證號、URL地址、 IPv4地址、 十六進制顏色、 日期、 QQ號碼、 微信號、車牌號、中文正則。

1 用戶名正則

//用戶名正則，4到16位（字母，數字，下劃線，減號）
var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
//輸出 true
console.log(uPattern.test("caibaojian"));

2 密碼強度正則

//密碼強度正則，最少6位，包括至少1個大寫字母，1個小寫字母，1個數字，1個特殊字符
var pPattern = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
//輸出 true
console.log("=="+pPattern.test("caibaojian#"));

3 整數正則

//正整數正則
var posPattern = /^\d+$/;
//負整數正則
var negPattern = /^-\d+$/;
//整數正則
var intPattern = /^-?\d+$/;
//輸出 true
console.log(posPattern.test("42"));
//輸出 true
console.log(negPattern.test("-42"));
//輸出 true
console.log(intPattern.test("-42"));

4 數字正則

//能夠是整數也能夠是浮點數
//正數正則
var posPattern = /^\d*\.?\d+$/;
//負數正則
var negPattern = /^-\d*\.?\d+$/;
//數字正則
var numPattern = /^-?\d*\.?\d+$/;
console.log(posPattern.test("42.2"));
console.log(negPattern.test("-42.2"));
console.log(numPattern.test("-42.2"));

5 Email正則

//Email正則
var ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
//輸出 true
console.log(ePattern.test("99154507@qq.com"));

6 手機號碼正則

//手機號正則
var mPattern = /^1[34578]\d{9}$/; //http://caibaojian.com/regexp-example.html
//輸出 true
console.log(mPattern.test("15507621888"));

7 身份證號正則

//身份證號（18位）正則
var cP = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
//輸出 true
console.log(cP.test("11010519880605371X"));

8 URL正則

//URL正則
var urlP= /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
//輸出 true
console.log(urlP.test("http://caibaojian.com"));

9 IPv4地址正則

//ipv4地址正則
var ipP = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
//輸出 true
console.log(ipP.test("115.28.47.26"));

10 十六進制顏色正則

//RGB Hex顏色正則
var cPattern = /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;
//輸出 true
console.log(cPattern.test("#b8b8b8"));

11 日期正則

//日期正則，簡單斷定,未作月份及日期的斷定
var dP1 = /^\d{4}(\-)\d{1,2}\1\d{1,2}$/;
//輸出 true
console.log(dP1.test("2017-05-11"));
//輸出 true
console.log(dP1.test("2017-15-11"));
//日期正則，複雜斷定
var dP2 = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/;
//輸出 true
console.log(dP2.test("2017-02-11"));
//輸出 false
console.log(dP2.test("2017-15-11"));
//輸出 false
console.log(dP2.test("2017-02-29"));

12 QQ號碼正則

//QQ號正則，5至11位
var qqPattern = /^[1-9][0-9]{4,10}$/;
//輸出 true
console.log(qqPattern.test("65974040"));

13 微信號正則

//微信號正則，6至20位，以字母開頭，字母，數字，減號，下劃線
var wxPattern = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/;
//輸出 true
console.log(wxPattern.test("caibaojian_com"));

14 車牌號正則

//車牌號正則
var cPattern = /^[京津滬渝冀豫雲遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陝吉閩貴粵青藏川寧瓊使領A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9掛學警港澳]{1}$/;
//輸出 true
console.log(cPattern.test("粵B39006"));

15 包含中文正則

//包含中文正則
var cnPattern = /[\u4E00-\u9FA5]/;
//輸出 true
console.log(cnPattern.test("蔡寶堅"));

看到最後，但願你們都能有所收穫，一時半會兒確定難以徹底消化，但只要多多練習使用，相信不久各位小可愛們都能把這些規則如臂指使。

點擊查看更多內容