【JS基礎】正則表達式入門

Mr_houzi 發(fā)布于2019-08-22 15:09 / 2305人閱讀

摘要：對于含有量詞正則表達式，量詞是貪婪模式，會優(yōu)先選擇盡可能多的匹配修飾的字符，所以該表達式會優(yōu)先選擇匹配一個字符，當匹配不到時再選擇不匹配字符。

正則表達式的語法 普通字符

字母、數(shù)字、漢字、下劃線以及一些沒有特殊定義的標點符號，都屬于普通字符，正則表達式中的普通字符匹配字符本身，如：

var str = "abced"
console.log(str.match(/a/))  // ["a",index:0,input:"abced"]

[]字符

[]可以包含一系列字符，能夠匹配其中的任意一個字符，如[abc]匹配abc中的任意一個字符，使用[^abc]包含的字符能夠匹配除了abc以外的任何一個字符。比如以下含義:

[abc]：匹配abc中的任意一個字符

[^abc]：匹配出了abc的任意一個字符

[0-9]：匹配0-9中的任意一個數(shù)字

var str = "abcde"
console.log(str.match(/[bcd][bcd]/))   // ["bc",index:1,input:"abcde"]

元字符

.：匹配除換行符意外的任意一個字符

w：匹配任意一個字母或數(shù)組或下劃線，[A-Za-z0-9_]

W：匹配除w以外的任意一個字符

d：匹配一個數(shù)字

D：匹配一個非數(shù)字字符

s：匹配任意空白字符

S：匹配任何非空白字符

$：匹配字符串的開始位置

^：匹配字符串的結束位置

：匹配一個單詞邊界，也就是單詞和空格間的位置，比如"erb"可以匹配never中的‘er’，但是不能匹配verb中的‘er’

B：匹配非單詞邊界，比如"erb"可以匹配verb中的‘er’，但是不能匹配never中的‘er’

：匹配換行符

f：匹配換頁符

：匹配回車符

：匹配制表符

如果需要匹配特殊字符本身，需要在特殊字符前加字符進行轉(zhuǎn)義，比如需要表示.字符需要"."。

量詞

n+：匹配一個或多個n字符

n*：匹配零個或多個字符

n?：匹配零個或一個字符

n{x}：匹配x個n

n{x,}：匹配x個或更多個n

n{x,y}：匹配x-y個n字符

?=n：匹配之后緊接著n的位置

?!n：匹配之后沒有緊接著n的位置

|：左右表達式之間或關系，匹配左邊或者右邊

()：在被修飾匹配次數(shù)的時候，()中的表達式可以作為整體被修飾，去匹配結果的時候，()中表達式匹配到的內(nèi)容可以被多帶帶得到。

貪婪模式與非貪婪模式

在正則表達式中，貪婪與非貪婪模式的區(qū)別主要是：被量詞修飾的字表達式的匹配行為的不同，貪婪模式在整個表達式匹配成功的情況下盡可能多的匹配，非貪婪模式是在整個表達式匹配成功的前提下，盡可能少的匹配。

常見的修飾貪婪模式的量詞如下：{x,y},{x,},?,，+。非貪婪模式就是在貪婪模式的量詞后面加上一個?字符，就可以變成非貪婪模式的量詞，比如：{x,y}?,{x,}?,??,?,+?。

var str = "longen舉杯邀明月、
yunxi對影成三人boyboy";
// 貪婪模式
console.log(str.match(/.*/));
// ["舉杯邀明月、
yunxi對影成三人",index:9,input:"..."]

// 非貪婪模式
console.log(str.match(/<>.*?/));
// ["對影成三人
",index:9,input:"..."]

正則表達式的匹配原理

在正則表達式匹配的過程中，如果子表達式匹配到的是字符內(nèi)容，而非位置的話，并且被保存在匹配的結果中，那么就認為該子表達式是占有字符的，如果子表達式匹配的僅僅是位置，或者說匹配的內(nèi)容不保存到匹配的結果中，那么該子表達式是零寬度的，比如環(huán)視。

正則表達式的匹配過程

比如上面的正則表達式/abc/，首先a取得控制權，從位置0開始匹配，a匹配成功，接著往下匹配，把控制權交給b，從位置1開始匹配，直到整個正則表達式匹配完成。對于含有量詞?正則表達式/ab?c/，量詞？是貪婪模式，會優(yōu)先選擇盡可能多的匹配修飾的字符，所以該表達式會優(yōu)先選擇匹配一個b字符，當b匹配不到時再選擇不匹配b字符。對于含有量詞的??的正則表達式，量詞??是非貪婪模式，會優(yōu)先選擇盡可能少的匹配修飾的字符，所以該表達式會優(yōu)先不匹配b字符，比如對于字符串a(chǎn)bc，a先匹配，控制權交給b??，該表達式先不匹配字符b，控制權交給c，c不能匹配abc中的b，匹配失敗進行回溯，由b??表達式匹配字符b，再把控制權交給c，匹配成功，因此整個表達式都匹配成功。

環(huán)視

環(huán)視是只進行子表達式的匹配，不占有字符，匹配的內(nèi)容不保存到最終的匹配結果，是零寬度的，它匹配的結果就是一個位置，環(huán)視的作用相當于對所在的位置加一個附加條件，只有滿足了這個條件，環(huán)視表達式才能匹配成功，環(huán)視有順序和逆序兩種，順序和逆序又分為肯定和否定，但是在JavaScript中只支持順序環(huán)視，下面就是順序環(huán)視的匹配過程：

(?=Expression)是順序肯定環(huán)視，含義是在位置的右側(cè)有expression。(?!Expression)是順序否定環(huán)視，含義是在位置的右側(cè)沒有expression。如下圖所示：該正則表達式的含義是：以字母或者數(shù)字組成的，并且第一個字符必須為小寫字母開頭。其匹配過程如下：

首先元字符^取得控制權，匹配字符串開始位置，接著將控制權交給順序肯定環(huán)視表達式(?=[a-z])，它的含義是在位置0的右側(cè)是有a-z的小寫字母，在這里匹配成功，將控制權交給[a-z0-9]+表達式，由于(?=[a-z])是零寬度的，字符串已匹配的位置不會增加，因此對于[a-z0-9]+其匹配的起始位置仍然為0。

對于順序否定環(huán)視，是根據(jù)其順序肯定環(huán)視的匹配結果來推斷的，當順序肯定環(huán)視匹配成功，順序否定就失敗，順序肯定匹配失敗，順序否定就成功。比如對于正則表達式/<(?!/?p)[^>]+>/，其含義是匹配所有非

的標簽，首先順序否定環(huán)視(?!/?p)要轉(zhuǎn)換成(?=/?p)，當(?=/pb)匹配失敗時，子表達式(?!/?p)才匹配成功。

捕獲組

捕獲組就是把正則表達式中用()包裹的子表達式匹配的內(nèi)容，保存到內(nèi)存中以數(shù)字編號或顯示命名的組里，方便以后使用，捕獲組的編號規(guī)則，編號是按照"("出現(xiàn)的順序，從左到右，從1開始進行編號，比如如下代碼：

console.log(/(longen)(123)/.test("longen123longen"))
console.log(RegExp.$1,RegExp.$2)    // longen 123

// 使用replace替換，將分組內(nèi)容替換
var num = "11 22"
var n = num.replace(/(d+)s*(d+)/,"$1 $2")
console.log(n)    // 22 11

非捕獲性分組：子表達式可以作為被整體修飾但是子表達式匹配的結果不會被存儲，要創(chuàng)建一個非捕獲性分組，只需要在“(”字符的后面加上“?:”就可以了，比如：(?:Expression)。

反向引用

捕獲性分組取到的內(nèi)容，不僅可以在正則表達式外部通過程序進行引用，也可以在正則表達式內(nèi)部進行引用，這種引用方式叫做反向引用。捕獲性分組的反向引用的寫法如：number。

反向引用的匹配原理：捕獲分組在匹配成功以后，會將子表達式匹配到的內(nèi)容，保存到內(nèi)存中一個以數(shù)字編號的組里，可以簡單的認為是對一個局部變量進行了賦值，這時可以通過反向引用，引用這個局部變量的值，一個捕獲分組在匹配成功之前，它的內(nèi)容是不確定的，一旦匹配成功，它的內(nèi)容就確定了，反向引用的內(nèi)容也就確定了。比如以下內(nèi)容：

var str = "longaabbcd"
console.log(str.match(/([ab])1/))  ["aa",...]

對于表達式([ab])，可以匹配a，也可以匹配b，但是如果匹配成功，它的反向引用也就確定，如果捕獲分組匹配到的是a，那么反向引用也就只能匹配a，也就是說([ab])1只能匹配aa或者bb。

云服務器 GPU云服務器正則表達式入門正則表達式基礎座機正則表達式 js js域名正則表達式

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93217.html

JS基礎入門篇（三十三）—正則表達式

摘要：舉例一使用這個正則，打印結果為使用這個正則，打印結果為舉例二打印結果如下過濾標簽你好美麗的上海想轉(zhuǎn)化成你好，美麗的上海如果后面加，就會進入非貪婪模式。如果后面不加，就會進入貪婪模式，結果為上海。你好美麗的上海。 1.創(chuàng)建一個正則表達式方法一：使用一個正則表達式字面量，其由包含在斜杠之間的模式組成。 var reg1 = /a/; var reg2 = /ab+c/; 方法二：調(diào)用Re...

caspar 2019-08-22 18:18 評論0 收藏0
JS基礎入門篇（三十三）—正則表達式

摘要：舉例一使用這個正則，打印結果為使用這個正則，打印結果為舉例二打印結果如下過濾標簽你好美麗的上海想轉(zhuǎn)化成你好，美麗的上海如果后面加，就會進入非貪婪模式。如果后面不加，就會進入貪婪模式，結果為上海。你好美麗的上海。 1.創(chuàng)建一個正則表達式方法一：使用一個正則表達式字面量，其由包含在斜杠之間的模式組成。 var reg1 = /a/; var reg2 = /ab+c/; 方法二：調(diào)用Re...

hot_pot_Leo 2019-08-02 10:47 評論0 收藏0
JS基礎入門篇（三十三）—正則表達式

摘要：舉例一使用這個正則，打印結果為使用這個正則，打印結果為舉例二打印結果如下過濾標簽你好美麗的上海想轉(zhuǎn)化成你好，美麗的上海如果后面加，就會進入非貪婪模式。如果后面不加，就會進入貪婪模式，結果為上海。你好美麗的上海。 1.創(chuàng)建一個正則表達式方法一：使用一個正則表達式字面量，其由包含在斜杠之間的模式組成。 var reg1 = /a/; var reg2 = /ab+c/; 方法二：調(diào)用Re...

y1chuan 2019-08-30 15:53 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業(yè)務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
【連載】前端個人文章整理-從基礎到入門

摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現(xiàn)在已經(jīng)一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現(xiàn)將已經(jīng)寫好的文章整理一個目錄，方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理從最開始萌生寫文章的想法，到著手...

madthumb 2019-08-23 14:15 評論0 收藏0