正則理解這些點(diǎn)就夠了

X_AirDu 發(fā)布于2019-08-21 18:37 / 3402人閱讀

摘要：不是完全的正則手冊(cè)，只記錄一些重要的容易有誤解的點(diǎn)定義正則表達(dá)式通過字面量形式或構(gòu)造函數(shù)形式定義或一般使用字面量形式，構(gòu)造函數(shù)形式用在正則表達(dá)式在運(yùn)行時(shí)才能確定下的情況例如另一方面字符串中反斜杠有別的含義要想表示等要使用兩個(gè)反斜杠來轉(zhuǎn)義反斜

不是完全的正則手冊(cè)，只記錄一些重要的,容易有誤解的點(diǎn)

定義

正則表達(dá)式通過字面量形式或RegExp構(gòu)造函數(shù)形式定義

const pattern=/d/g
//或
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á)式中反斜杠有重要的含義

是用來轉(zhuǎn)義有特殊含義的字符，比如 [、^、.

要想只匹配.com 需要 /.com/.test(".com")

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

而在字符串中反斜杠同樣是一個(gè)轉(zhuǎn)義字符，n r t

要想在字符串中表示需要兩個(gè)

new RegExp("[w.]").toString()=="/[w.]/"

()、[]與|

[]:集合操作符，表示一系列字符的任意一個(gè)

例如:/[abc]/ 表示a、b、c中的任意一個(gè)能匹配就可以了

對(duì)于/[a|b]/呢？

一個(gè)常見的誤區(qū)是感覺/[a|b]/表示要匹配a或者b,其實(shí)是a、b或者|中的任意一個(gè)

/[a|b]/.test("|") === true

/(a|b)/.test("|") ===false

從上面可以看到，圓括號(hào)中的|是或的意思,表示要匹配()以|分割的兩邊的整體，注意是整體

例子：

/(abc|abd)/.test("ab") ===false
/(abc|abd)/.test("abc") ===true
/(abc|abd)/.test("abd") ===true

分組和捕獲

上面只是介紹了圓括號(hào)中存在|時(shí)需注意的點(diǎn)，這里重點(diǎn)說一下圓括號(hào)

在正則中,圓括號(hào)有兩種含義，一是用來分組，一是用來捕獲想要的值

分組

（)結(jié)合* ？ + {} 使用時(shí)，是對(duì)圓括號(hào)內(nèi)的整體進(jìn)行repeat

/(ab)+/ 匹配一個(gè)或多個(gè)ab

/(ab)+|(cd)+/ 匹配一個(gè)或多個(gè) ab或cd

捕獲

捕獲是一個(gè)強(qiáng)大的功能，也是很多時(shí)候我們使用正則的原因，同樣以()來表示

例子:找出樣式中的透明度值



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)記使用，下面介紹

需要強(qiáng)調(diào)的是，因?yàn)榉纸M和捕獲一樣使用(),所以，在一個(gè)正則表達(dá)式中既有用于分組的(),也有用于捕獲的()時(shí)，對(duì)于分組部分，可以加上?:,這樣，結(jié)果集就只包含我們想要捕獲的部分

例子

"hahahahah".match(/(<[^>]+>)([^<]+)/)
> [ hahahahah ,  , hahahahah ] //兩個(gè)捕獲

如果我們只對(duì)標(biāo)簽內(nèi)的文本感興趣

"hahahahah".match(/(?:<[^>]+>)([^<]+)/)
> [ hahahahah , hahahahah ] //對(duì)于,我們不關(guān)心，就不要了

說到?: 就要提一下長(zhǎng)得差不多的 ?= 和 ?!

?= 表示后面必須跟著某些東西,并且結(jié)果中不包含?=指定的部分，并且不捕獲

?= 表示后面必須不跟著某些東西

對(duì)比看一下

/a(?:b)/.exec("abc")
> ["ab", index: 0, input: "abc"] //注意匹配的是"ab"

/a(?=b)/.exec("abc")
> ["a", index: 0, input: "abc"] //注意匹配的只是"a"

再看個(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è)上面說的邊界都要檢測(cè)2，如果符合，replace把邊界替換成,

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

對(duì)比來看

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

"p123 q123".match(/[a-z]+(d+)/g)
> ["p123", "q123"]

可以看到加上g后，返回的數(shù)組就只有匹配項(xiàng)了

那么，即想匹配全部，又想獲取到捕獲怎么辦呢？

使用while結(jié)合exec()

let pattern=/[a-z]+(d+)/g
let str="p123 q123"
let match
while((match=pattern.exec(str)) !=null){
    console.log(match)
}

> ["p123", "123", index: 0, input: "p123 q123"]
  ["q123", "123", index: 5, input: "p123 q123"]

replace()

對(duì)于字符串的replace方法,重點(diǎn)說一下，接受的第二個(gè)參數(shù)，可以是一個(gè)函數(shù)

對(duì)于str.replace(/xxxxx/g,function(){})

函數(shù)在每次前面的正則匹配成功時(shí)都會(huì)執(zhí)行，函數(shù)的參數(shù)依次是，完整的匹配文本、依次的捕獲部分、當(dāng)前匹配的索引、原始字符串

"border-bottom-width".replace(/-(w)/g,(match,capture)=>{
    return capture.toUpperCase()
})
> "borderBottomWidth"

喜歡的給個(gè)star,github,謝謝

云服務(wù)器 GPU云服務(wù)器兒就夠篇就夠如果這些數(shù)據(jù)統(tǒng)計(jì) 對(duì)這些不太明白

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

X_AirDu

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

二級(jí)域名ssl證書如何申請(qǐng)?二級(jí)域名ssl證書申請(qǐng)流程

閱讀 2331·2021-11-23 10:09
項(xiàng)目工具:兩行代碼快速生成測(cè)試的數(shù)據(jù)的FakeDataMaker

閱讀 2898·2021-10-12 10:11
又漲了？程序員9月平均薪資，高薪還能持續(xù)多久？

閱讀 2605·2021-09-29 09:35
基于vue2 + muse-ui構(gòu)建的移動(dòng)端、PC端輕社區(qū)項(xiàng)目 F-Rent 友租

閱讀 1346·2019-08-30 15:53
CSS3主要內(nèi)容

閱讀 2272·2019-08-30 11:15
[譯]HTML&CSS Lesson1: 構(gòu)建第一張頁(yè)面

閱讀 2916·2019-08-29 13:01
CSS基礎(chǔ)篇-- :before && :after的用法，偽類和偽元素的區(qū)別

閱讀 2300·2019-08-28 18:15
畢業(yè)兩年，我是如何從技術(shù)「轉(zhuǎn)型」到管理的？

閱讀 3369·2019-08-26 12:13

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

正則理解這些點(diǎn)就夠了

相關(guān)文章