angular中的自定義過濾器

ITzhongzi發表於2017-04-01

1.1. 正規表示式

1.1.1. 建立方式

1、直接量語法:
    /pattern/attribute
2、建立RegExp物件的語法
    new RegExp(pattern,attribute);

注意:
  1、引數 pattern 是一個字串,指定了正規表示式的模式或其他正規表示式。

  2、引數 attributes 是一個可選的字串,包含屬性 "g"、"i" 和 "m",分別用於指定全域性匹配、區分大小寫的匹配和多行匹配。

1.1.1.1. 元字元

  • "." 查詢單個字元,除了換行符和行結束符
  • "\w" 查詢單詞字元
  • "\W" 查詢非單詞字元
  • "\d" 查詢數字
  • "\D" 查詢非數字
  • "\s" 查詢空白字元
  • "\S" 查詢非空白字元
  • "\b" 匹配單詞的邊界
  • "\B" 匹配非單詞邊界。
  • "\0" 查詢 NUL 字元。
  • "\n" 查詢換行符。
  • "\f" 查詢換頁符。
  • "\r" 查詢回車符。
  • "\t" 查詢製表符。
  • "\v" 查詢垂直製表符。
  • "\xxx" 查詢以八進位制xxx規定的字元
  • "\xdd" 查詢以十六進位制dd規定的字元
  • "\uxxx" 查詢以十六進位制xxxx規定的unicode字元

1.1.1.2. 量詞

  • n+ 匹配任何包含至少一個 n 的字串。
  • n* 匹配任何包含零個或多個 n 的字串。
  • n? 匹配任何包含零個或一個 n 的字串。
  • n{X} 匹配包含 X 個 n 的序列的字串。
  • n{X,Y} 匹配包含 X 或 Y 個 n 的序列的字串。
  • n{X,} 匹配包含至少 X 個 n 的序列的字串。
  • n$ 匹配任何結尾為 n 的字串。
  • ^n 匹配任何開頭為 n 的字串。
  • ?=n 匹配任何其後緊接指定字串 n 的字串。
  • ?!n 匹配任何其後沒有緊接指定字串 n 的字串。

1.1.1.3. 正則中常用的方法

1、test
              語法: <regexp>.test( string ) -> boolean   //返回一個布林值
              判斷這個字串是否符合這個正規表示式
              常用於驗證

2、exec      語法:<regexp>.test(string) -> Array   //返回一個陣列
              它可以將匹配的字元全部提取出來

              1> 單個字串提取
                  /e/.exec( 'abcdefg' ) -> [ 'e' ]
                  /h/.exec( 'abcdefg' ) -> null

              2>提取並解析(常用)
                  分組: 在政治則表示式中使用 () 將匹配的結果進行分組
                  給分組編號:
                    1)從左往右數     左圓括號(
                    2) 依次從 1 開始給圓括號編號
                    例如:
                         123   4  5  6
                        /(((.)(.))(.)(.))/

                  使用exec方法返回的是一個陣列,在匹配結果中,匹配到的字串是陣列的
                  第 0  個元素,  陣列的第 1 個元素是匹配到的第一組,陣列的第 2 個元素
                   是匹配到的 第二組,以此類推。。。

                   示例:           123  4   5  6
                          var r = /(((.)(.))(.)(.))/;
                          var str = 'abcd';
                          r.exec( str );
                          在匹配到的陣列中:(一下為返回的陣列組成)
                           // [ 0 ]: 匹配到的結果:   'abcd'
                           // [ 1 ]: 匹配到的第1組:  'abcd'
                           // [ 2 ]: 匹配到的第2組:  'ab'
                           // [ 3 ]: 匹配到的第3組:  'a'
                           // ...

              3>  對路徑的解析:

                   /.:.*\\.+\..+/
                 例如: c:\\windows\\system32\\1.mp3
                 注意:在用正則匹配碟符路徑的時候,注意將盼復路徑中的 “\”轉義成 “\\”

              4>  正則中的貪婪模式
                      1、貪婪模式, 所有 +, * 這類元字元都是儘可能多匹配
                      /.+.+.+/
                      'abcdefg'
                      解析:在這個例子中,第一個 ".+" 表示匹配一個或多個字元,
                            因為貪婪模式,所以它將盡可能多的匹配字元,因為後面還有兩個".+",
                            後面兩個最少匹配兩個字元,所以第一個'.+'最多匹配 abcde。


                      2、取消貪婪使用 ?
                        /.+?.+.+/
                        'abcdefg'
                        解析:在這個例子中 因為第一個'.+'後面加了‘?’,取消了他的貪婪模式,所以它將
                            儘可能少的匹配字元,在本例子中匹配“a”,而第二組".+"後面沒有?,也就是沒
                            有取消貪婪模式,所以將會匹配“bcdef”,最後一組".+"匹配 ‘g’;


               5>  3> 迴圈提取所有
                         'abcdefgedgedg' // 將其中所有的 e 取出來
                          操作:
                           1) 在正規表示式中啟用全域性模式: /..../g, new RegExp( '...', 'g' )
                           2) 呼叫一次 exec 方法, 獲取一個匹配項
                           3) 再次呼叫 exec 方法, 獲得下一個匹配項
                           4) 如此往復, 沒有匹配項的是否返回 null, 再次呼叫 exec 則匹配返回第一個匹配項

                                 var m;
                                 while ( ( m = r.exec( str ) ) != null ) {
                                     // m 就是每一次匹配到的結果
                                 }     

1.1.1.4. 示例demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
</body>
<script>
    // 使用者輸入一個路徑
    // var path = 'C:\\Users\\jklib\\Desktop\\angular-1.5.8\\docs\\components\\bootstrap-3.1.1\\js\\bootstrap.js';
    // var path = 'C:\\Users\\jklib\\Desktop\\angular-1.5.8\\docs\\components\\bootstrap-3.1.1\\js\\.gitignore';

    var path = 'D:\\1.mp3';


    // 解析
    //        12        34   5
    var r = /^((.:).*\\)((.+?)(\..+|))$/;

    var m = r.exec( path );
    // match

    console.log( '解析的路徑為: ' + path + '\n' +
                 '驅動器為: ' + m[ 2 ] + '\n' +
                 '檔案路徑為: ' + m[ 1 ] + '\n' +
                 '檔名為: ' + m[ 3 ] + '\n' +
                 '檔案字尾名為: ' + m[ 5 ] + '\n' +
                 '沒有字尾名的檔名為: ' + m[ 4 ]
                 );



     // 驗證貪婪
     console.log( /(.+)(.+)(.+)/.exec( 'abcdefg' ) );
     console.log( /(.+?)(.+)(.+)/.exec( 'abcdefg' ) );
     console.log( /(.*)(.*)(.*)/.exec( 'abcdefg' ) );
</script>
</html>

相關文章