如何理解JavaScript正則表達式

如何理解JavaScript正則表達式，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

一、正則表達式創建

1.var reg = /test/;

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

3.正則表達式的exec方法

var reg = /test/;

var str = 'testrjf';

var res = reg.exec(str);

//會匹配str里面test內容，有就返回匹配的該內容，沒有返回null

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

二、正則表達式模式

這里寫一個方法方便后面演示

function execReg(reg,str){

var result = reg.exec(str);

console.log(result);

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

reg = /c{1}/;//匹配一個c

str='cainiao';

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

reg = /c{2}/;//匹配兩個連續的c,{n}同理

str1='ccaniao';

str2='cacniao';

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

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

reg = /c{3,4}/;//匹配3個或4連續的c

str1='cccTest';

str2='ccccTest';

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

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

reg = /c{1,}/;//匹配1個以上的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}/

這里在提示一下，正則表達式會盡可能匹配多的目標返回，有4個就不會返回3個

2./^開頭,結尾$/

^開頭

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

str1='維生素c';

str2='cainiao';

execReg(reg,str1);//結果為null，因為字符串‘ 外匯分析師’的開頭并不是c

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

結尾$

reg = /c$/;//$匹配字符串結尾的字符

str1='cainiao';

str2='維生素c';

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

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

3.點“.”

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

str1='cainiao';

str2='bainiao';

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

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

reg = /.+/;

str1='blueidea—經典論壇  好_。';

str2='bbs.blueidea.com';

str3='\ncainiao';

execReg(reg,str1);

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

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.括號

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

str='bbs.blueidea.com';

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

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

//我們在正則表達式內括號里寫的內容會被認為是子正則表達式，所匹配的結果也會被記錄下來供后面使用。我們暫且不去理會這個特性。

6.字符集合[abc]

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

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（即第一個b沒有匹配）

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

8.邊界與非邊界

\b表示的邊界的意思

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

str1='cainiao';

str2='維生素c';

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

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

\B表示非邊界

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

str='aicniao';

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

9.數字與非數字

\d表示數字的意思

reg = /\d/;

str='cainiao8';

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

\D表示非數字的意思

reg = /\d/;

str='cainiao8';

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

10.空白

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

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

reg = /\s.+/;

str='This is a test  String.';

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

\S表示非空格字符。

reg = /\S+/;

str='This is a test  String.';

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

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”就叫做反向引用，它表示的是第一個括號內的字正則表達式匹配的內容。

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

13.不記錄子正則表達式的匹配結果

使用形如(?:pattern)的正則就可以避免保存括號內的匹配結果

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

str='bbs.blueidea.com';

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

//前面提到的括號里子表達式不被保存

14.正向預查

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

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

str1='cainiao9';

str2='cainiao8';

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

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

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

reg = /cainiao(?!8)/;

str1='cainiao9';

str2='cainiao8';

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

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

15.匹配元字符

*,+,?之類的符號，它們在正則表達式中都有一定的特殊含義，類似這些有特殊功能的字符都叫做元字符。那我們想匹配’c?'這種字符串呢？

reg = /c\?/;

str='c?';

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

三、正則表達式修飾符

1.i: 執行對大小寫不敏感的匹配。

var reg = /b/;

var str = 'BBS';

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

var reg = /b/i;

var str = 'BBS';

execReg(reg,str);//B

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

在后面進行講解

3.m: 執行多行匹配。

reg = /^b/;

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

execReg(reg,str);//null

reg = /^b/m;

str = 'test\nbbs';

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

四、正則表達式方法

1.exec方法

exec方法返回的其實并不是匹配結果字符串，而是一個對象，簡單地修改一下execReg函數，來做一個實驗就可以印證這一點。

function  execReg(reg,str){

var result =  reg.exec(str);

console.log(typeof result);

reg = /b/;

str='bbs.bblueidea.com';

execReg(reg,str);

//顯示result的類型是object。而且是一個類似數組的對象。

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

然后修改execReg函數

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);

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