js正則驗(yàn)證特殊字符 js正則表達(dá)式語法大全 _表達(dá)式

0.導(dǎo)引在正文開始前，先說說正則表達(dá)式是什么，為什么要用正則表達(dá)式？正則表達(dá)式在我個(gè)人看來就是一個(gè)程序可以識(shí)別的規(guī)則，有了這個(gè)規(guī)則，程序就可以幫我們判斷某些字符是否符合我們的要求。但是，我們?yōu)槭裁匆褂谜齽t表達(dá)式呢？下面來看個(gè)正則業(yè)務(wù)場景，來驗(yàn)證一串字符是否為合法QQ號。示例如下：
/*** 要求：一個(gè)合法的QQ號必須滿足：1、5-15位；2、全是數(shù)字；3、不以0開頭*///1.在不使用正則表達(dá)式的時(shí)候，我們可能會(huì)這樣判斷QQ號的合法性var qq="6666666a6666";if(qq.length>=5&&qq.length<=15&&!isNaN(qq)&&qq.charCodeAt(0)!=48){alert("QQ合法");}else{alert("QQ不合法")}//2.使用正則表達(dá)式var qq="066336";var reg=/^[1-9][0-9]{4,14}$/;if(reg.test(qq)){alert("QQ合法");}else{alert("QQ不合法");}從上面這個(gè)例子可以看出來使用了正則表達(dá)式的時(shí)候，我們的代碼量變少了，而且比較直觀。如果遇到非常的復(fù)雜的匹配，正則表達(dá)式的優(yōu)勢就更加明顯了。

文章插圖
那什么是正則表達(dá)式呢？
1.正則定義也就是創(chuàng)建正則表達(dá)式對象，可通過字面量形式或RegExp構(gòu)造函數(shù)兩種形式來定義，如下所示：
// 字面量定義const pattern=/d/g//或構(gòu)造器定義const pattern = new RegExp('d','g')一般使用字面量形式，構(gòu)造函數(shù)形式用在正則表達(dá)式在運(yùn)行時(shí)才能確定下的情況,例如

function hasClass(ele, classname) {const pattern = new RegExp('(^|\s)' + classname + '(\s|$)')return pattern.test(ele.className)}

注意：字符串中反斜杠有別的含義,要想表示d等要使用兩個(gè)反斜杠來轉(zhuǎn)義\d*。
第一種通過“/正則表達(dá)式/修飾符“這種形式直接寫出來；
第二種通過“new RegExp(‘正則表達(dá)式’ ， ’修飾符’)”創(chuàng)建一個(gè)RegExp對象。
其中修飾符為可選項(xiàng) ，有三個(gè)取值分別為：g為全局匹配；i指不區(qū)分大小寫；m指多行匹配。
通過上述方式，就創(chuàng)建了正則表達(dá)式對象。說到RegExp對象，下面要說一下RegExp對象自帶的屬性，并不復(fù)雜，這里我就列一下，不做展開。

文章插圖
2.符號及應(yīng)用解析

文章插圖
1）反斜杠
在正則表達(dá)式中反斜杠有重要的含義

是用來轉(zhuǎn)義有特殊含義的字符，比如 [、^、.等。例如，要想只匹配.com 需要

/.com/.test('.com')

預(yù)定的字符類以開始，比如 d w s

分組

（)結(jié)合* ？ + {} 使用時(shí) ，是對圓括號內(nèi)的整體進(jìn)行repeat
/(ab)+/ 匹配一個(gè)或多個(gè)ab/(ab)+|(cd)+/ 匹配一個(gè)或多個(gè) ab或cd

捕獲

捕獲是一個(gè)強(qiáng)大的功能，也是很多時(shí)候我們使用正則的原因，同樣以()來表示
例子:找出樣式中的透明度值

<div id="opacity" style="opacity:0.5;filter:alpha(opacity=50);">function getOpacity(elem) {var filter = elem.style.filter;if(filter){return filter.indexOf("opacity=") >= 0 ?(parseFloat(filter.match(/opacity=([^)]*)/)[1]) / 100) + "" : ""}return elem.style.opacity}

捕獲主要結(jié)合exec()、match() 和 g標(biāo)記使用，下面會(huì)介紹
需要強(qiáng)調(diào)的是，因?yàn)榉纸M和捕獲一樣使用(),所以，在一個(gè)正則表達(dá)式中既有用于分組的(),也有用于捕獲的()時(shí) ，對于分組部分，可以加上?:,這樣，結(jié)果集就只包含我們想要捕獲的部分。
示例如下：

'<div>hahahahah<div>'.match(/(<[^>]+>)([^<]+)/)> [ <div>hahahahah , <div> , hahahahah ] //兩個(gè)捕獲如果我們只對標(biāo)簽內(nèi)的文本感興趣'<div>hahahahah<div>'.match(/(?:<[^>]+>)([^<]+)/)> [ <div>hahahahah , hahahahah ] //對于<div>,我們不關(guān)心 ， 就不要了

說到?: 就要提一下長得差不多的 ?= 和 ?!
?= 表示后面必須跟著某些東西,并且結(jié)果中不包含?=指定的部分，并且不捕獲
?! 表示后面必須不跟著某些東西
對比看一下

/a(?:b)/.exec('abc')> ["ab", index: 0, input: "abc"] //注意匹配的是"ab"/a(?=b)/.exec('abc')> ["a", index: 0, input: "abc"] //注意匹配的只是"a"/a(?!b)/.exec('abc')> null //沒有匹配的 ， 返回的是null

再看個(gè)例子,數(shù)字字符串轉(zhuǎn)千分位
function formatNumber(str) {return str.replace(/B(?=(d{3})+$)/g, ',')}formatNumber("123456789")> 1,234,567,890解釋:

B表示除了字符串首字母之前的邊界，比如1和2之間的邊界， 2和3之間的邊界等
后面()中的?=(d{3})+$表示上面提到的那些邊界后面必須跟著3N個(gè)數(shù)字直到字符串尾部
g表示全局匹配，即每個(gè)上面說的邊界都要檢測2 ，如果符合， replace把邊界替換成,

4）exec()、match()與g標(biāo)記
exec()和match()都是返回?cái)?shù)組，結(jié)果集中包含捕獲的內(nèi)容
在正則中不包含g時(shí) ， exec()和match()返回的結(jié)果集是一樣的，數(shù)組中依次是整個(gè)匹配的字符串、依次的（）指定的要捕獲的部分

文章插圖
在有g(shù)的時(shí)候， match()返回的數(shù)組中的每一項(xiàng)是依次匹配到的整體字符串，不包含每個(gè)匹配中捕獲到的內(nèi)容
對比來看

"p123 q123".match(/b[a-z]+(d+)/)> ["p123", "123", index: 0, input: "p123 q123"]"p123 q123".match(/b[a-z]+(d+)/g)> ["p123", "q123"]

可以看到加上g后，返回的數(shù)組就只有匹配項(xiàng)了
那么，即想匹配全部，又想獲取到捕獲怎么辦呢？
while與exec()結(jié)合

let pattern=/b[a-z]+(d+)/glet str='p123 q123'let matchwhile((match=pattern.exec(str)) !=null){console.log(match)}> ["p123", "123", index: 0, input: "p123 q123"]["q123", "123", index: 5, input: "p123 q123"]

5）replace()
對于字符串的replace方法,重點(diǎn)說一下，其第二個(gè)參數(shù) ，可是一個(gè)函數(shù) 。
對于str.replace(/xxxxx/g,function(){})
函數(shù)在每次前面的正則匹配成功時(shí)都會(huì)執(zhí)行，函數(shù)的參數(shù)依次是，完整的匹配文本、依次的捕獲部分、當(dāng)前匹配的索引、原始字符串
"border-bottom-width".replace(/-(w)/g,function(match,capture){return ";"+capture.toUpperCase()})> "border;Bottom;Width"注意，有人可能把其中的第二個(gè)函數(shù)參數(shù)改寫成箭頭函數(shù) ，如(..)=>{..}則可能會(huì)出錯(cuò),需要當(dāng)心。

文章插圖
3.應(yīng)用精要有了上面的認(rèn)知和解析，這里再總結(jié)一下正則對象（包括兩種方式創(chuàng)建的對象）的主要方法。
1.test()檢索字符串中指定的值。返回 true 或 false 。這個(gè)是我們平時(shí)最常用的方法。
var reg=/hello w{3,12}/; alert(reg.test('hello js'));//false alert(reg.test('hello javascript'));//true2.exec()檢索字符串中指定的值。匹配成功返回一個(gè)數(shù)組，匹配失敗返回null 。
var reg=/hello/;console.log(reg.exec('hellojs'));//['hello']console.log(reg.exec('javascript'));//null3.compile()compile() 方法用于改變正則。compile() 既可以改變檢索模式，也可以添加或刪除第二個(gè)參數(shù) 。

var reg=/hello/;console.log(reg.exec('hellojs'));//['hello']reg.compile('Hello');console.log(reg.exec('hellojs'));//nullreg.compile('Hello','i');console.log(reg.exec('hellojs'));//['hello']

正則表達(dá)式拓展除了RegExp對象提供方法之外， String對象也提供了四個(gè)方法來使用正則表達(dá)式，在使用JavaScript時(shí) ，也常用到。
1.match()在字符串內(nèi)檢索指定的值,匹配成功返回存放匹配結(jié)果的數(shù)組，否則返回null 。這里需要注意的一點(diǎn)事，如果沒有設(shè)置全局匹配g ，返回的數(shù)組只存第一個(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()在字符串內(nèi)檢索指定的值,匹配成功返回第一個(gè)匹配成功的字符串片段開始的位置，否則返回-1 。
var reg=/javascript/i;console.log('hello Javascript Javascript Javascript'.search(reg));//63.replace()替換與正則表達(dá)式匹配的子串，并返回替換后的字符串。在不設(shè)置全局匹配g的時(shí)候，只替換第一個(gè)匹配成功的字符串片段。

var reg1=/javascript/i;var reg2=/javascript/ig;console.log('hello Javascript Javascript Javascript'.replace(reg1,'js'));//hello js Javascript Javascriptconsole.log('hello Javascript Javascript Javascript'.replace(reg2,'js'));//hello js js js

4.split()把一個(gè)字符串分割成字符串?dāng)?shù)組。

var reg=/1[2,3]8/;console.log('hello128Javascript138Javascript178Javascript'.split(reg));//['hello','Javascript','Javascript178Javascript']

4.兩例實(shí)戰(zhàn)第一次接觸正則表達(dá)式同學(xué)們，可能被這個(gè)正則表達(dá)式的規(guī)則弄得迷迷糊糊的，根本無從下手。小編我第一次學(xué)這個(gè)正則表達(dá)式的時(shí)候，也是稀里糊涂，什么元字符、量詞完全不知道什么東西，云里霧里的。后面小編細(xì)細(xì)研究了一下，總結(jié)一套方法，希望可以幫助大家。
【js正則驗(yàn)證特殊字符 js正則表達(dá)式語法大全】關(guān)于正則表達(dá)式書寫規(guī)則，可查看w3school ，上面說的很清楚了，我就不貼出來了。我就闡述一下我寫正則表達(dá)式的思路。
其實(shí)正則表達(dá)式都可以拆成一個(gè)或多個(gè)（取值范圍+量詞）這樣的組合。針對每個(gè)組合我們根據(jù)JS正則表達(dá)式的規(guī)則翻譯一遍，然后將每個(gè)組合重新拼接一下就好了。下面我們舉個(gè)例子來試一下，看看這個(gè)方法行不行。
驗(yàn)證QQ號的合法性合法qq號規(guī)則：1、5-15位；2、全是數(shù)字；3、不以0開頭
第一步：拆成（取值范圍+量詞）這樣的組合根據(jù)QQ號的驗(yàn)證規(guī)則，我們可以拆成兩個(gè)（取值范圍+量詞）的組合。分別是：
1.（1~9的數(shù)字， 1個(gè)）；2.（0~9的數(shù)字， 4~14個(gè)）第二步：根據(jù)正則表達(dá)式規(guī)則翻譯（取值范圍+量詞）

1.（1~9的數(shù)字 ， 1個(gè)）=>[1-9]{1}或者[1-9]2.（0~9的數(shù)字 ， 4~14個(gè)）=>[0-9]{4,14}

第三步：將翻譯好的（取值范圍+量詞）組合進(jìn)行拼接初學(xué)者可能在拼接這一步會(huì)犯一個(gè)錯(cuò)誤，可能會(huì)組合拼接成這個(gè)樣子/[1-9]{1}[0-9]{4,14}/或者簡寫翻譯成/[1-9] [0-9]{4,14}/這些都不對的。調(diào)用test()方法的時(shí)候，你會(huì)發(fā)現(xiàn)只要一段字符串中有符合正則表達(dá)式的字符串片段都會(huì)返回true ，童鞋們可以試一下。

var reg=/[1-9][0-9]{4,14}/;alert(reg.test('0589563'));//true ， 雖然有0 ， 但是'589563'片段符合alert(reg.test('168876726736788999'));//true,這個(gè)字符串長度超出15位 ， 達(dá)到18位 ， 但是有符合的字符串片段

正確的寫法應(yīng)該是這樣的：
/^[1-9][0-9]{4,14}$/（用^和$指定起止位置）下面我們看一個(gè)復(fù)雜點(diǎn)的例子：
驗(yàn)證國內(nèi)電話號碼0555-6581752、021-86128488
第一步：拆成（取值范圍+量詞）這樣的組合這里會(huì)拆成兩個(gè)大組合：

1、（數(shù)字0 ， 1個(gè)）+（數(shù)字0~9 ， 3個(gè)）+("-" ， 1個(gè))+（數(shù)字1~9 ， 1個(gè)）+（數(shù)0~9 ， 6個(gè)）2、（數(shù)字0 ， 1個(gè)）+（數(shù)字0~9 ， 2個(gè)）+("-" ， 1個(gè))+（數(shù)字1~9 ， 1個(gè)）+（數(shù)0~9 ， 7個(gè)）

第二步：根據(jù)正則表達(dá)式規(guī)則翻譯（取值范圍+量詞）1、([0-0],{1})+([0-9],{3})+"-"+([1,9],{1})+([0,9],{6})2、([0-0],{1})+([0-9],{2})+"-"+([1,9],{1})+([0,9],{7})第三步：將翻譯好的（取值范圍+量詞）組合進(jìn)行拼接這里我們先拼接一個(gè)大組合，然后再將大組合拼接起來
1、0[0-9]{3}-[1-9][0-9]{6}2、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}$)/最后正則表達(dá)式并不難，懂了其中的道道和套路——所謂的核心和精要之后，一切都會(huì)變得簡單。
另外，說點(diǎn)題外話——網(wǎng)上不乏一些文章記錄一些常用的正則表達(dá)式，然后新手前端在使用正則表達(dá)式的時(shí)候都會(huì)直接拿來就用。在這里我想說一下自己的看法，這些所謂記錄常用的正則表達(dá)式文章并非完全都是正確的，有不少都是錯(cuò)的，也可能是無心的，就像我們經(jīng)常在網(wǎng)上看到的示例，你怎么也跑不通。所以同學(xué)們在日后使用的過程盡量自己寫正則表達(dá)式，多寫寫練練和總結(jié) ，實(shí)在不會(huì)了可以去參考一下，但真的不要照搬下來。咱不說這種會(huì)影響自己成長的話，咱就說你抄的一定都是對的嗎？多動(dòng)手，多思考一下，總沒有壞處的。