400-650-7353
您所在的位置:首頁(yè) > IT干貨資料 > web前端 > 【W(wǎng)eb前端基礎(chǔ)知識(shí)】關(guān)于前端正則表達(dá)式基本用法(上)

【W(wǎng)eb前端基礎(chǔ)知識(shí)】關(guān)于前端正則表達(dá)式基本用法(上)

  • 發(fā)布: Web前端培訓(xùn)
  • 來(lái)源:Web前端干貨資料
  • 2020-08-14 16:51:04
  • 閱讀()
  • 分享
  • 手機(jī)端入口

1 兩種模糊匹配

如果正則只有精確匹配是沒(méi)多大意義的,比如/hello/,也只能匹配字符串中的”hello”這個(gè)子串。

  1. var regex = /hello/; 
  2. console.log( regex.test("hello") );  
  3. // => true 

正則表達(dá)式之所以強(qiáng)大,是因?yàn)槠淠軐?shí)現(xiàn)模糊匹配。

而模糊匹配,有兩個(gè)方向上的“模糊”:橫向模糊和縱向模糊。

1.1 橫向模糊匹配

橫向模糊指的是,一個(gè)正則可匹配的字符串的長(zhǎng)度不是固定的,可以是多種情況的。

其實(shí)現(xiàn)的方式是使用量詞。譬如{m,n},表示連續(xù)出現(xiàn)最少m次,最多n次。

比如/ab{2,5}c/表示匹配這樣一個(gè)字符串:第一個(gè)字符是“a”,接下來(lái)是2到5個(gè)字符“b”,最后是字符“c”。測(cè)試如下:

  1. var regex = /ab{2,5}c/g; 
  2. var string = "abc abbc abbbc abbbbc abbbbbc abbbbbbc"
  3. console.log( string.match(regex) );  
  4. // => ["abbc", "abbbc", "abbbbc", "abbbbbc"] 

注意:案例中用的正則是/ab{2,5}c/g,后面多了g,它是正則的一個(gè)修飾符。表示全局匹配,即在目標(biāo)字符串中按順序找到滿足匹配模式的所有子串,強(qiáng)調(diào)的是“所有”,而不只是“第一個(gè)”。g是單詞global的首字母。

1.2 縱向模糊匹配

縱向模糊指的是,一個(gè)正則匹配的字符串,具體到某一位字符時(shí),它可以不是某個(gè)確定的字符,可以有多種可能。

其實(shí)現(xiàn)的方式是使用字符組。譬如[abc],表示該字符是可以字符“a”、“b”、“c”中的任何一個(gè)。

比如/a[123]b/可以匹配如下三種字符串:”a1b”、”a2b”、”a3b”。測(cè)試如下:

  1. var regex = /a[123]b/g; 
  2. var string = "a0b a1b a2b a3b a4b"
  3. console.log( string.match(regex) );  
  4. // => ["a1b", "a2b", "a3b"] 

以上就是本章講的主體內(nèi)容,只要掌握橫向和縱向模糊匹配,就能解決很大部分正則匹配問(wèn)題。

接下來(lái)的內(nèi)容就是展開(kāi)說(shuō)了,如果對(duì)此都比較熟悉的話,可以跳過(guò),直接看本章案例那節(jié)。

【W(wǎng)eb前端基礎(chǔ)知識(shí)】關(guān)于前端正則表達(dá)式基本用法(上)

2. 字符組

需要強(qiáng)調(diào)的是,雖叫字符組(字符類),但只是其中一個(gè)字符。例如[abc],表示匹配一個(gè)字符,它可以是“a”、“b”、“c”之一。

2.1 范圍表示法

如果字符組里的字符特別多的話,怎么辦?可以使用范圍表示法。

比如[123456abcdefGHIJKLM],可以寫(xiě)成[1-6a-fG-M]。用連字符-來(lái)省略和簡(jiǎn)寫(xiě)。

因?yàn)檫B字符有特殊用途,那么要匹配“a”、“-”、“z”這三者中任意一個(gè)字符,該怎么做呢?

不能寫(xiě)成[a-z],因?yàn)槠浔硎拘?xiě)字符中的任何一個(gè)字符。

可以寫(xiě)成如下的方式:[-az]或[az-]或[a-z]。即要么放在開(kāi)頭,要么放在結(jié)尾,要么轉(zhuǎn)義?傊粫(huì)讓引擎認(rèn)為是范圍表示法就行了。

2.2 排除字符組

縱向模糊匹配,還有一種情形就是,某位字符可以是任何東西,但就不能是”a”、”b”、”c”。

此時(shí)就是排除字符組(反義字符組)的概念。例如[^abc],表示是一個(gè)除”a”、”b”、”c”之外的任意一個(gè)字符。字符組的第一位放^(脫字符),表示求反的概念。

當(dāng)然,也有相應(yīng)的范圍表示法。

2.3 常見(jiàn)的簡(jiǎn)寫(xiě)形式

有了字符組的概念后,一些常見(jiàn)的符號(hào)我們也就理解了。因?yàn)樗鼈兌际窍到y(tǒng)自帶的簡(jiǎn)寫(xiě)形式。

\d就是[0-9]。表示是一位數(shù)字。記憶方式:其英文是digit(數(shù)字)。

\D就是[^0-9]。表示除數(shù)字外的任意字符。

\w就是[0-9a-zA-Z_]。表示數(shù)字、大小寫(xiě)字母和下劃線。記憶方式:w是word的簡(jiǎn)寫(xiě),也稱單詞字符。

\W是[^0-9a-zA-Z_]。非單詞字符。

\s是[ \t\v\n\r\f]。表示空白符,包括空格、水平制表符、垂直制表符、換行符、回車符、換頁(yè)符。記憶方式:s是space character的首字母。

\S是[^ \t\v\n\r\f]。 非空白符。

.就是[^\n\r\u2028\u2029]。通配符,表示幾乎任意字符。換行符、回車符、行分隔符和段分隔符除外。記憶方式:想想省略號(hào)…中的每個(gè)點(diǎn),都可以理解成占位符,表示任何類似的東西。

如果要匹配任意字符怎么辦?可以使用[\d\D]、[\w\W]、[\s\S]和[^]中任何的一個(gè)。

文章“【W(wǎng)eb前端基礎(chǔ)知識(shí)】關(guān)于前端正則表達(dá)式基本用法(上)”已幫助

>>本文地址:http://nfbqydst.cn/zhuanye/2020/52150.html

THE END  

聲明:本站稿件版權(quán)均屬中公教育優(yōu)就業(yè)所有,未經(jīng)許可不得擅自轉(zhuǎn)載。

1 您的年齡

2 您的學(xué)歷

3 您更想做哪個(gè)方向的工作?

獲取測(cè)試結(jié)果
  • 大前端大前端
  • 大數(shù)據(jù)大數(shù)據(jù)
  • 互聯(lián)網(wǎng)營(yíng)銷互聯(lián)網(wǎng)營(yíng)銷
  • JavaJava
  • Linux云計(jì)算Linux
  • Python+人工智能Python
  • 嵌入式物聯(lián)網(wǎng)嵌入式
  • 全域電商運(yùn)營(yíng)全域電商運(yùn)營(yíng)
  • 軟件測(cè)試軟件測(cè)試
  • 室內(nèi)設(shè)計(jì)室內(nèi)設(shè)計(jì)
  • 平面設(shè)計(jì)平面設(shè)計(jì)
  • 電商設(shè)計(jì)電商設(shè)計(jì)
  • 網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)頁(yè)設(shè)計(jì)
  • 全鏈路UI/UE設(shè)計(jì)UI設(shè)計(jì)
  • VR/AR游戲開(kāi)發(fā)VR/AR
  • 網(wǎng)絡(luò)安全網(wǎng)絡(luò)安全
  • 新媒體與短視頻運(yùn)營(yíng)新媒體
  • 直播帶貨直播帶貨
  • 智能機(jī)器人軟件開(kāi)發(fā)智能機(jī)器人
 

快速通道fast track

近期開(kāi)班時(shí)間TIME