如何理解JavaScript正則表達(dá)式

如何理解JavaScript正則表達(dá)式，相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

一、正則表達(dá)式創(chuàng)建

1.var reg = /test/;

2.var reg = new RegExp('test');

3.正則表達(dá)式的exec方法

var reg = /test/;

var str = 'testrjf';

var res = reg.exec(str);

//會(huì)匹配str里面test內(nèi)容，有就返回匹配的該內(nèi)容，沒有返回null

console.log(res);//數(shù)組形式保存test

二、正則表達(dá)式模式

這里寫一個(gè)方法方便后面演示

function execReg(reg,str){

var result = reg.exec(str);

console.log(result);

}1.一片兩片三四片，落盡正則全不見{n},{n-1,n},{1,}。

reg = /c{1}/;//匹配一個(gè)c

str='cainiao';

execReg(reg,str);//返回c

reg = /c{2}/;//匹配兩個(gè)連續(xù)的c,{n}同理

str1='ccaniao';

str2='cacniao';

execReg(reg,str1);//返回cc

execReg(reg,str2);//返回null，沒有兩個(gè)連續(xù)cc

reg = /c{3,4}/;//匹配3個(gè)或4連續(xù)的c

str1='cccTest';

str2='ccccTest';

execReg(reg,str1);//返回ccc

execReg(reg,str2);//返回cccc。(正則會(huì)盡量多的匹配)

reg = /c{1,}/;//匹配1個(gè)以上的c。{2,}{3,}...同理

str1='cccTest';

str2='chjjk';

execReg(reg,str1);//返回ccc

execReg(reg,str2);//返回c

reg='/c*/和等同于reg='/c{0,}/

reg='/c+/和等同于reg='/c{1,}/

reg='/c?/和等同于reg='/c{0,1}/

這里在提示一下，正則表達(dá)式會(huì)盡可能匹配多的目標(biāo)返回，有4個(gè)就不會(huì)返回3個(gè)

2./^開頭,結(jié)尾$/

^開頭

reg = /^c/;//^表示只匹配字符串的開頭

str1='維生素c';

str2='cainiao';

execReg(reg,str1);//結(jié)果為null，因?yàn)樽址? 外匯分析師’的開頭并不是c

execReg(reg,str2);//這次則返回c

結(jié)尾$

reg = /c$/;//$匹配字符串結(jié)尾的字符

str1='cainiao';

str2='維生素c';

execReg(reg,str1);//返回null

execReg(reg,str2);//返回c

3.點(diǎn)“.”

reg = /./;//'.'會(huì)匹配字符串中除了換行符\n之外的所有字符

str1='cainiao';

str2='bainiao';

execReg(reg,str1);//正則匹配到了字符c

execReg(reg,str2);//正則匹配到了字符b

reg = /.+/;

str1='blueidea—經(jīng)典論壇  好_。';

str2='bbs.blueidea.com';

str3='\ncainiao';

execReg(reg,str1);

//返回'blueidea—經(jīng)典論壇  好_。'所有的字符都被匹配到了

execReg(reg,str2);//返回'bbs.blueidea.com'

execReg(reg,str3);//返回null

4.或“|“

reg = /b|c/;

str1='blueidea';

str2='cainiao';

execReg(reg,str1);//返回b

execReg(reg,str2);//返回c

reg = /^b|c.+/;

str='cainiao';

execReg(reg,str);//返回cainiao，理解成開頭b|c然后.+

reg = /^b|c.+/;

str='bbs.blueidea.com';

execReg(reg,str);//返回b，這里看成開頭的b或者是c.+

5.括號(hào)

reg = /^(b|c).+/;

str='bbs.blueidea.com';

execReg(reg,str);//此時(shí)才是開頭b|c，然后.+

//回的結(jié)果后面多出來一個(gè)“,b“，這是()內(nèi)的b|c所匹配的內(nèi)容。

//我們?cè)谡齽t表達(dá)式內(nèi)括號(hào)里寫的內(nèi)容會(huì)被認(rèn)為是子正則表達(dá)式，所匹配的結(jié)果也會(huì)被記錄下來供后面使用。我們暫且不去理會(huì)這個(gè)特性。

6.字符集合[abc]

reg = /^[abc]/;//[abc]表示a或者b或者c中的任意一個(gè)字符

str='bbs.blueidea.com';

execReg(reg,str);//返回b

reg = /^[a-zA-Z][a-zA-Z0-9_]+/;//先^[a-zA-Z]，后[a-zA-Z0-9_]+

str='test';

execReg(reg,str);//返回test

7.反字符集合[^abc]

reg = /[^abc]/;

str='blueidea';

execReg(reg,str);//返回l（即第一個(gè)b沒有匹配）

即：[^0-9] 表示非數(shù)字，[^a-z] 表示非小寫字母…

8.邊界與非邊界

\b表示的邊界的意思

reg = /\bc/;//表示字符串開始的c或者是結(jié)尾的c

str1='cainiao';

str2='維生素c';

execReg(reg,str1);//返回c，左邊界的c

execReg(reg,str2);//返回c，右邊界的c

\B表示非邊界

reg = /\Bc/;//表示字符串除了開始（結(jié)尾）的c

str='aicniao';

execReg(reg,str);//返回c，中間的c

9.數(shù)字與非數(shù)字

\d表示數(shù)字的意思

reg = /\d/;

str='cainiao8';

execReg(reg,str);//返回8

\D表示非數(shù)字的意思

reg = /\d/;

str='cainiao8';

execReg(reg,str);//返回c

10.空白

\f匹配換頁符，\n匹配換行符，\r匹配回車，\t匹配制表符，\v匹配垂直制表符。

\s匹配單個(gè)空格，等同于[\f\n\r\t\v]。

reg = /\s.+/;

str='This is a test  String.';

execReg(reg,str);//返回'is a test  String.',匹配第一個(gè)空格以及其后的所有非換行字符。

\S表示非空格字符。

reg = /\S+/;

str='This is a test  String.';

execReg(reg,str);//This，當(dāng)遇到第一個(gè)空格之后，正則就停止匹配

11.單詞字符

\w表示單詞字符，等同于字符集合[a-zA-Z0-9_]。

reg = /\w+/;

str='.blueidea';

execReg(reg,str);//blueidea

\W表示非單詞字符，等效于[^a-zA-Z0-9_]。

reg = /\W+/;

str='中文如何？';

execReg(reg,str);//'中文如何？'

12.反向引用

reg = /(\w)\1/;

str1='blueidea';

str2='bblueidea';

execReg(reg,str1);//返回null

execReg(reg,str2);//bb

//這里的“\1”就叫做反向引用，它表示的是第一個(gè)括號(hào)內(nèi)的字正則表達(dá)式匹配的內(nèi)容。

//在上面的例子中，第一個(gè)括號(hào)(\w)匹配了b，“\1”就同樣表示b了，在余下的字符串里自然找不到b了。

13.不記錄子正則表達(dá)式的匹配結(jié)果

使用形如(?:pattern)的正則就可以避免保存括號(hào)內(nèi)的匹配結(jié)果

reg = /^(?:b|c).+/;

str='bbs.blueidea.com';

execReg(reg,str);//返回bbs.blueidea.com

//前面提到的括號(hào)里子表達(dá)式不被保存

14.正向預(yù)查

形式：(?=pattern)，即要匹配的字符串，后面必須緊跟著pattern！

reg = /cainiao(?=8)/;//只是后面必須跟著8，但結(jié)果不匹配8

str1='cainiao9';

str2='cainiao8';

execReg(reg,str1);//返回null

execReg(reg,str2);//返回cainiao

形式：(?!pattern)和?=恰好相反，要求字符串的后面不能緊跟著某個(gè)pattern

reg = /cainiao(?!8)/;

str1='cainiao9';

str2='cainiao8';

execReg(reg,str1);//返回cainiao

execReg(reg,str2);//返回null

15.匹配元字符

*,+,?之類的符號(hào)，它們?cè)谡齽t表達(dá)式中都有一定的特殊含義，類似這些有特殊功能的字符都叫做元字符。那我們想匹配’c?'這種字符串呢？

reg = /c\?/;

str='c?';

execReg(reg,str);//返回'c?'

三、正則表達(dá)式修飾符

1.i: 執(zhí)行對(duì)大小寫不敏感的匹配。

var reg = /b/;

var str = 'BBS';

execReg(reg,str);//返回null

var reg = /b/i;

var str = 'BBS';

execReg(reg,str);//B

2.g: 執(zhí)行全局匹配（查找所有匹配而非在找到第一個(gè)匹配后停止）

在后面進(jìn)行講解

3.m: 執(zhí)行多行匹配。

reg = /^b/;

str = 'test\nbbs';//有換行

execReg(reg,str);//null

reg = /^b/m;

str = 'test\nbbs';

execReg(reg,str);//返回b,換行后第二行b開頭

四、正則表達(dá)式方法

1.exec方法

exec方法返回的其實(shí)并不是匹配結(jié)果字符串，而是一個(gè)對(duì)象，簡(jiǎn)單地修改一下execReg函數(shù)，來做一個(gè)實(shí)驗(yàn)就可以印證這一點(diǎn)。

function  execReg(reg,str){

var result =  reg.exec(str);

console.log(typeof result);

reg = /b/;

str='bbs.bblueidea.com';

execReg(reg,str);

//顯示result的類型是object。而且是一個(gè)類似數(shù)組的對(duì)象。

其中屬性：index input  0。其中index是表示匹配在原字符串中的索引；而input則是表示輸入的字符串；至于0則是表示只有一個(gè)匹配結(jié)果，可以用下標(biāo)0來引用這個(gè)匹配結(jié)果，這個(gè)數(shù)量可能改變。我們可以通過返回值的length屬性來得知匹配結(jié)果的總數(shù)量。

然后修改execReg函數(shù)

function  execReg(reg,str){

var result =  reg.exec(str);

console.log('index:'+result.index+'\n'+'input:'+result.input+'\n');

for(i=0;i<1result.length;i++){ style="overflow-wrap: break-word" p=""

console.log('result['+i+']:'+result[i]+'\n');

reg  = /\w/;

str='bbs.bblueidea.com';

execReg(reg,str);

看完上述內(nèi)容，你們掌握如何理解JavaScript正則表達(dá)式的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！