angular中的自定义过滤器

最新推荐文章于 2021-10-20 08:44:18 发布

ITzhongzi

最新推荐文章于 2021-10-20 08:44:18 发布

阅读量452

点赞数 1

分类专栏：前端学习笔记

本文链接：https://blog.csdn.net/ITzhongzi/article/details/68948287

版权

前端学习笔记专栏收录该内容

306 篇文章 7 订阅

订阅专栏

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>