• <menu id="wosog"><strong id="wosog"></strong></menu>
  • <nav id="wosog"></nav>
  • <menu id="wosog"></menu>
    400-650-7353

    精品課程

    您所在的位置:首頁 > IT干貨資料 > web前端 > 【Web前端基礎知識】關于前端正則表達式基本用法(上)

    【Web前端基礎知識】關于前端正則表達式基本用法(上)

    • 發布: Web前端培訓
    • 來源:Web前端干貨資料
    • 2020-08-14 16:51:04
    • 閱讀()
    • 分享
    • 手機端入口

    1 兩種模糊匹配

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

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

    正則表達式之所以強大,是因為其能實現模糊匹配。

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

    1.1 橫向模糊匹配

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

    其實現的方式是使用量詞。譬如{m,n},表示連續出現最少m次,最多n次。

    比如/ab{2,5}c/表示匹配這樣一個字符串:第一個字符是“a”,接下來是2到5個字符“b”,最后是字符“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是單詞global的首字母。

    1.2 縱向模糊匹配

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

    其實現的方式是使用字符組。譬如[abc],表示該字符是可以字符“a”、“b”、“c”中的任何一個。

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

    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"] 

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

    接下來的內容就是展開說了,如果對此都比較熟悉的話,可以跳過,直接看本章案例那節。

    【Web前端基礎知識】關于前端正則表達式基本用法(上)

    2. 字符組

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

    2.1 范圍表示法

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

    比如[123456abcdefGHIJKLM],可以寫成[1-6a-fG-M]。用連字符-來省略和簡寫。

    因為連字符有特殊用途,那么要匹配“a”、“-”、“z”這三者中任意一個字符,該怎么做呢?

    不能寫成[a-z],因為其表示小寫字符中的任何一個字符。

    可以寫成如下的方式:[-az]或[az-]或[a-z]。即要么放在開頭,要么放在結尾,要么轉義。總之不會讓引擎認為是范圍表示法就行了。

    2.2 排除字符組

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

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

    當然,也有相應的范圍表示法。

    2.3 常見的簡寫形式

    有了字符組的概念后,一些常見的符號我們也就理解了。因為它們都是系統自帶的簡寫形式。

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

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

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

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

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

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

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

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

    課程好禮申請領取
    您的姓名
    您的電話
    意向課程
     

    中公優就業

    官方QQ

    掃描上方二維碼或點擊一鍵加群,免費領取價值599元網課,加群暗號:599。 一鍵加群

    >>本文地址:
    注:本站稿件未經許可不得轉載,轉載請保留出處及源文件地址。

    推薦閱讀

    優就業:ujiuye

    關注中公優就業官方微信

    • 關注微信回復關鍵詞“大禮包”,領80G學習資料
    QQ交流群
    領取免費網課
    (加群備注“網站”)
    IT培訓交流群 加入群聊 +
    軟件測試 加入群聊 +
    全鏈路UI/UE設計 加入群聊 +
    Python+人工智能 加入群聊 +
    互聯網營銷 加入群聊 +
    Java開發 加入群聊 +
    PHP開發 加入群聊 +
    VR/AR游戲開發 加入群聊 +
    大前端 加入群聊 +
    大數據 加入群聊 +
    Linux云計算 加入群聊 +
    優就業官方微信
    掃碼回復關鍵詞“大禮包”
    領取80G學習資料

    巨劃算
    現在開通
    2020OAO訓練營
    免費試聽
    課程資料、活動優惠 領取通道
     
     
  • <menu id="wosog"><strong id="wosog"></strong></menu>
  • <nav id="wosog"></nav>
  • <menu id="wosog"></menu>
    线上棋牌平台