javascript 的正則表達(dá)式(分類筆記)

帶你入門(幾個(gè)小小點(diǎn))

目錄

  1. 正則表達(dá)式的使用
  2. 正則表達(dá)式的基本構(gòu)成元素
  3. 正則中的類(分類),基本的元字符 + 五個(gè)基本類,構(gòu)成正則的各種變化
  4. 正則表達(dá)式的分組 和 匹配出來的變量引用
  5. 正則的匹配原理 和 應(yīng)用

正則表達(dá)式中不能正常顯示(不能正常使用)的字符基本都可以使用轉(zhuǎn)義來解決

    $1 表示分組的第一個(gè)字符
    
    \$1 表示一個(gè) `$1` 字符

正則表達(dá)式可以快速處理基本字符,文本,網(wǎng)址,郵箱,日期等數(shù)據(jù)

  • 日期的使用

      ^(\d{4})[/-](\d{2})[/-](\d{2})$ // 請(qǐng)?jiān)嚪g該正則表達(dá)式       
    
      2006/02/03
    
      test/07/sd
    
      1998-03-07
    
      12345/23/1998
    
dateRegExp.png
  • http 協(xié)議的使用

      http:\/\/(.+\.jpg)      // 請(qǐng)?jiān)嚪g該正則表達(dá)式
    
httpRegExp.png
  • 一些常用的正則含義

      \d  ->  digit
      
      \b  ->  word boundary
      
      \w  ->  word
      
      $   ->  End of line
      
      ^   ->  Start of line
    
      [0-9]   ->  One of: '0' - '9'
      
      [/-]    ->  One of: '/' '-'
      
      (\w)    -> group #1 word
      
      g   ->  global
       
      i   -> ignore case
    
1.小葵花媽媽課堂正式開課啦. 哈哈,上面的你要是不熟悉就當(dāng)我是在裝逼格高啦!

  1. 兩種實(shí)例化RegExp對(duì)象的方法 (先來看看 regExp 哥哥長(zhǎng)什么1樣子)

    小時(shí)候是這樣(長(zhǎng)得中規(guī)中矩)

     var reg = new RegExp("正則表達(dá)式",修飾符); // 修飾符是啥?后面聊
    

    長(zhǎng)大了長(zhǎng)這樣(這 TM 長(zhǎng)的就很隨意啦)

     var reg = /正則表達(dá)式/修飾符
    

    像上面這樣寫就可以生成一個(gè) 正則對(duì)象啦

  2. 聊聊修飾符 (長(zhǎng)相很隨意,發(fā)型來幫忙)

     g (global): 全文搜索,不添加g,搜索到第一個(gè)匹配停止;
    
     i (ignore case) : 忽略大小寫,不添加則默認(rèn)為大小寫敏感;
    
     m ( multiple lines):多行搜索
    
     g i m 可以一起使用
    
  3. 元字符(就像信息有一元分詞,二元分詞等)。就是作為正則表達(dá)式的基本構(gòu)成體

     注意:這里的元字符是一個(gè)整體并不是簡(jiǎn)單的一個(gè)字符
     
     a,b,c .... 表示一個(gè)個(gè)元字符
     
     \t, \v, \n ... 也表示一個(gè)個(gè)元字符
     
     $1, $2 ... 也表示一個(gè)個(gè)元字符
    
    • 作為基本字符的元字符(不解釋。。。)

    • 特殊字符作為元字符 基本構(gòu)成體,既然是體,肯定有線條,有孤獨(dú),有凹有凸。。。。

        下面你看到的這些都是元字符
        
        $ ^ | . + ? [] {} ()
      
        \t  水平制表符
        \n  換行符
        ......
      

      特殊字符我們暫且叫 她 元字體

2. 正則也是有族譜的,看看正則相關(guān)的分類

  1. 元字符

    元字符每個(gè)就代表一個(gè)意思,表示取到這個(gè)字符的意思(元字體每個(gè)也都是單獨(dú)的意思)

  2. 字符類 (何為字符類,就是將 字符拼在一塊組成一類嘛。物以類聚,人以群分)

    • 構(gòu)成類, 使用 [] 將某些字符構(gòu)成一類 表示或的意思

        [abc] a 或者 b 或者 c
        
        [0123456789] 0 或者  1 或者 2 ...等我吐完這口老血一定說到 9                     
      

      明白了沒?構(gòu)成類表示或者意思

      char.png
    • 字符類取反, ^ 表示取反的意思

        [^abc]      //不是 a,也不是 b, 也不是 c..
      
        [^0123456789]       // 小明你來念
      

      取反表示取這些之外字符。

    NoneOf.png
  3. 范圍類 0-9, a,-z, 12-15 就表示一個(gè)范圍呀 表示這個(gè)范圍內(nèi)或的意思

    范圍類需要結(jié)合字符類一起使用,表示這個(gè)范圍里的或者

    范圍類是個(gè)閉區(qū)間

     直接上栗子
     
     [0123456789]    // 原來你這樣寫的
     
     [0-9] // 范圍類這樣寫的
    
    number.png
     [abcdefghigklmnopqrstuvwxyz]    // 原來這樣寫的
     
     [a-zA-Z]    //范圍類這樣寫 還比原來寫的多
    
    letter.png
  4. JavaScript預(yù)定義類

    預(yù)定義類就是 正則 覺得你寫東西不容易,他幫你 預(yù)定義一些好用的 類(有一種冷是你媽媽覺得你冷)

    chartClass.png
     解釋一下:
     
     1. 
         d -> digit
         s -> space
         w -> word
     
     2. 
         使用之前的 字符類 + 范圍類 等也可以實(shí)現(xiàn) 預(yù)定義類 的匹配,but 預(yù)定義類不是更簡(jiǎn)單嗎
     
         \d 和 \D 大小寫正好是取反
     
         \s 和 \S 大小寫取反
     
         。。。。。   更多的大小寫取反
    
  5. 量詞啊?。?!

    1. 所謂量詞就是表示多少數(shù)量的詞,從 0 - n 滿足你花樣的數(shù)量匹配的需求。

      numberword.png

    2. 伴隨量詞而來的另一個(gè)問題,到底匹配多少次

       '12345678'.replace(/\d{3, 6}/g, 'X'); // 誰能聊聊這個(gè)到底匹配了幾個(gè)字符
       
       悄悄告訴圣僧,正則默認(rèn)采用的的是貪婪模式(正則就像貪食蛇一樣盡可能多的匹配)
      

      正則的 貪婪模式 和非貪婪模式 (因?yàn)?code>其伴隨著量詞而生,所有總在量詞后面,使用一個(gè) ? 來區(qū)分

       '12345678'.replace(/\d{3,6}/g, 'X');  // X78 貪婪模式
       '12345678'.replace(/\d{3,6}?/g, 'X');  // XX 78  非貪婪模式
      
  6. 邊界類

    邊界類就是取字符的邊界 (文檔都應(yīng)該有 上下左右留白,正則也是很有要面子的)

    bianjie.png
    b -> boundary  // 解釋一下 b 代表的單詞
3. 從這里開啟新征程

  1. 分組 所謂分組就是將 組內(nèi)的整體當(dāng)做元字符 使用。

     (byron){3}  // 分組將 byron 作為整體
     
     (byron|capital) // 分組將 byron或者capital 作為整體
     
     by(ron|cap)ital     // 分組將 ron或者cap 作為整體
    
    group.png
  1. 分組的引用 每個(gè)小小的分組其實(shí)都有一個(gè)默認(rèn)的引用 (拿啥引,拿錢引唄)

     '2015-11-21'.replace(/(\d{4})-(\d{2})-(\d{2})/, '$3/$2/$1')   // "21/11/2015"
     
     看見沒 
     $3 就表示 第三個(gè)分組(括號(hào)) 里面的 內(nèi)容
     $2 就表示 第二個(gè)分組(括號(hào)) 里面的 內(nèi)容
     $1 就表示 第一個(gè)分組(括號(hào)) 里面的 內(nèi)容
     
     這就是分組的引用
    
  2. 忽略分組 有些分組我們不想要怎么辦??

    (?:內(nèi)容) 使用 ?: 就表示可以忽略該分組

     比如我們想在寫的亂七八糟的數(shù)據(jù)里面找日期并且換種顯示方式
     
     '2015-asdasd-11-21'.replace(/(\d{4})-(?:\w+)-(\d{2})-(\d{2})/, '$3/$2/$1');   // "21/11/2015"
    

有個(gè)小問題? [] 中括號(hào) 表示或者的意思,而 | 豎線 也表示或者的意思,這兩者有何區(qū)別?

4. 來看看 正則表達(dá)式的匹配原理是什么

記住四個(gè)字: 前瞻 后顧
meatch.png

正則表達(dá)式的前瞻:

1,正則表達(dá)式是從文本頭部向尾部開始解析,從文本尾部向文本前部,稱為‘前’

2,前瞻就是在正則表達(dá)式匹配到規(guī)則時(shí),向前檢查是否符合斷言。

所謂的前瞻就是在正則表達(dá)式匹配到某個(gè)字符的時(shí)候,往“尚未解析過的文本”預(yù)先看一下,看是不是符合/不符合匹配模式,
    而后顧,就是在正則引擎已經(jīng)匹配過的文本看看是不是符合/不符合匹配模式。符合和不符合特定匹配模式我們又稱為肯定式匹配和否定式匹配。

反向/否定匹配稱為斷言不符合

qiznhan.png
    本節(jié)課程基本沒有實(shí)用性,大家了解就好?。。。。?!
5. 看看真正的正則表達(dá)式強(qiáng)人是怎么煉成的 (實(shí)踐證明全局和非全局是非常重要的)

  1. 正式表達(dá)式本質(zhì)是個(gè)啥?是個(gè)對(duì)象呀(一幫叫做正則表達(dá)式對(duì)象)

    是對(duì)象就應(yīng)該有屬性和方法,下面來看看 (五大三粗少一粗 就是五個(gè)屬性兩個(gè)方法

    • 屬性 有下面五個(gè)
    attr.png
       reg.global, reg.ignoreCase, reg.multiline 都是只讀的正則屬性
    
    • 解釋一下這個(gè) lastIndex

      與正則表達(dá)式相關(guān)的術(shù)語 : 當(dāng)前表達(dá)式 + 最后一個(gè)字符 + 下一個(gè)字符

        有的同學(xué)說我這個(gè)正則表達(dá)式結(jié)果不穩(wěn)定呀,
         這個(gè) test 只有第一次完全正確,以后都是不確定的,這個(gè)怎么辦?
        其實(shí)就是 lasrIndex 在作怪,下面詳細(xì)說明
        
        var reg = /\w/g
        
        reg.test(a);    // true
        reg.test(a);    // false
      
    • 正則表達(dá)式的方法

      • test Reg 對(duì)象屬性 表示 測(cè)試后面的字符是否能在前面的 test 中找到

          test 只是用于測(cè)試是否存在,不關(guān)系 lastIndex...一些詳細(xì)信息
        
      • exec RegExp.prototype.exec 正則更詳細(xì)的信息在這里

        exec.png
          exec 后結(jié)果解析:
          
          匹配到了文本 返回?cái)?shù)組 若沒有 匹配到的文本則返回null
          
          reg.index 表示匹配文本的第一個(gè)字符串
          
          reg.input 表示被檢索的字符串
        

        exec 在全局和非全局 (有 g 和沒有 g) 結(jié)果下有不一樣的結(jié)果

        非全局下

          lastIndex == 0 (而且一直為零)
        

        全局情況下

          lastIndex 隨著匹配的前瞻而變化
        
  2. 字符串的正則匹配方法 ** 四個(gè)大漢**

    使用這四個(gè)方法進(jìn)行匹配時(shí),就算傳入的參數(shù)不是正則,javascript 也會(huì)盡可能嘗試將參數(shù)轉(zhuǎn)為正則

    • String.prototype.search(reg/str/...);

      特點(diǎn):

        方法返回第一個(gè)匹配結(jié)果的index,查找不到返回-1;
      
        方法不執(zhí)行全局匹配,它將忽略標(biāo)志g,
        
        總是從字符串的開始進(jìn)行檢索(總是從頭開始查找)
      
    • String.prototype.match(reg/str/...)

        特點(diǎn):是否全局有區(qū)別
      
        非全局情況下和 exec 的到的結(jié)果基本類似 
        
            result.index
            
            result ['匹配到的子字符串', '分組信息']
            
            result.lastIndex (沒有該屬性)
        
        全局情況下 匹配所有的匹配到的子字符串(是一個(gè)數(shù)組)
        
            result.lastIndex (沒有該屬性)
            
            result ['匹配到的子字符串1', '匹配到的子字符串2',.....] (沒有分組信息)
      
    • String.prototype.split(reg/str/...)

        特點(diǎn):
            
            將匹配到的字符作為分割符號(hào) 將字符串切成數(shù)組
      
    • String.prototype.replace('reg/str/...找誰)', '替換成的樣子')

        特點(diǎn):
        
            將找到的字符替換成設(shè)定的字符串
      

      replace 送額外的福利啦

      replace 需要替換的字符可以又一個(gè)函數(shù)的 callback 來承擔(dān)
      
      String.prototype.replace(reg, function(resultStr, group1, gruop2, index, sourceStr) {})
      
  3. 大家聊聊 str.match(reg)reg.exec(str) 分別有什么不同

     提示一下: 
     
         是否帶有 g(全文搜索) 
    
         返回的結(jié)果(比如結(jié)果中都有神馬?index, lastIndex ....)
    
  4. 幾個(gè)常見的注意事項(xiàng)

    1. ^ 放在外面和放在 [] (中括號(hào))里面是不一樣的

      ^(135|136|177|180)   // 放在外面的 ^ 表示以 某個(gè)字符開頭的
      [^135]                          // 放在 中括號(hào)里面表示取反,不包括這些字符
      
    2. ? 單獨(dú)出現(xiàn)和放在 () (小括號(hào)中) 是不一樣的

      ? 放在單獨(dú)出現(xiàn)表示一個(gè)量詞   // 表示 問號(hào) 前面的量詞出現(xiàn) 零次或者一次
              [123]?  // 表示 1 或者 2 或者 3 ,三個(gè)數(shù)字最多出現(xiàn)一次
      
      ? 放在小括號(hào)中                          // 表示前瞻 后顧 負(fù)前瞻,負(fù) 后顧
      
            前瞻: exp1(?=exp2)     查找exp2前面的exp1
            后顧:  (?<=exp2)exp1   查找exp2后面的exp1
            負(fù)前瞻:  exp1(?=exp2)     查找后面不是exp2的exp1
            負(fù)后顧:  (?<=exp2)exp1   查找前面不是exp2的exp1
            
            可以發(fā)現(xiàn),負(fù)前瞻、負(fù)后顧就是把前瞻、后顧中的"="改成了"!"
      
           示例:
               (?<=博)客(?=園)    // 表示只 匹配到 博客園 中的 客 字
               (?<!博)客(?!園)      // 表示只匹配其他字符串中的 客 字,不匹配 博客園 字符串中的客
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容