09——正则

第九周

正则表达式

• 什么是正则表达式

  • 描述字符串的 " 构成模式" , 检查字符串是否符合预定的格式要求
  • 大概样貌 : var regexp = /^m\d\d\dn$/ 下面细节

• 正则表达式的基本使用

  • 正则表达式的创建

    • var regexp = / 内容 /
    • new RegExp( ' 内容 ' )
    • typeof reg // object

  • 元字符

    • 一位指定类型的字符

    • 元字符
      \d	一个数字
      \D	一个非数字
      \w	一个字符 ( 数字/ 字母/ 下划线 )
      \W	一个非字符
      \s	一个空白, 包括空格 制表符 换行符
      .	任意字符
      ^ $	开头 结尾

    • 例子:

      • 某快递公司运单号形式是这样的 : 123-4567-890 , 请使用正则表达式检查某字符串是否符合格式

      • 某产品验证密钥形式是这样的 : □□□-□□□□-□□□ , 其中 □ 表示字母数字或下划线 , 请使用正则表达式检查某字符串是否符合格式

      • 某产品批号 : 123.45^67#89

      • var regexp1 = /^\d\d\d-\d\d\d\d-\d\d\d$/;
        var regexp2 = /^\w\w\w-\w\w\w\w-\w\w\w$/;
        var regexp3 = /^\d\d\d\.\d\d\^\d\d\#\d\d$/;       // 注意这里的# 加不加\ 一样  
        

      • 注意 : \ 的本意需要两个 \

  • 方括号表示法

    • 创建一个字符集合，匹配方括号中的任意一个

    • 例子：某校学号规定，第一位是字母，b表示本科生，y表示研究生，后面是7位数字，请使用正则

    • var regexp1 = /^[by]\d{7}$/
      

    • 其他用法： 短横 - 表示范围 ^ 表示取反

    • 元字符	等价的方括号表示法
      \d	[0-9]
      \D	[^0-9]
      \w	[a-zA-Z0-9_]
      \W	[^a-zA-Z0-9_]

    • 题目1：验证字符串是否是5位字母，大小写均可

    • 题目2：验证字符串是否是5位字母，且仅有小写字母，点构成

    • 题目3：验证字符串是否是4位小写字母，且最后一位不能是m

    • var regexp1 = /^[a-zA-Z]{5}$/
      var regexp2 = /^[a-z\.]{5}$/
      var regexp3 = /^[a-z]{3}[a-ln-z]$/
      

  • 量词

    • 量词	含义
      *	匹配前一个表达式0 次或n 次，等价
      +	匹配前一个表达式1 次或n 次，等价
      ？	匹配前一个表达式0 次或1 次，等价
      	前一个字符刚好出现n 次
      	前一个字符至少出现n 次
      	前一个字符至少n 次，至多m 次

    • 题目1：验证字符串是否符合手机号码规则，11 位数字，并且以1 开头

    • 题目2：验证：以字母开头，中间是任意位数字（最少一位），并以字母结尾

    • 题目3：验证某字符串是否符合网址规则，以www. 开头，中间是任意位的字符（字母数字下划线），最后以 .com 或者 .com.cn 结尾

    • var regexp1 = /^1\d{10}$/
      var regexp2 = /^[a-zA-Z]\d+[a-zA-Z]$/
      var regexp3 = /^www\.\w+\.com(\.cn)?$/
      

  • 修饰符

    • i ：不区分大小写搜索
    • g ： 全局搜索
    • 使用：
      • var re = /m/gi
      • var re = new RegExp( ' m ' , 'gi')

• 正则表达式和字符串

  • 正则表达式的相关方法

    • test() 测试字符串是否匹配正则，返回布尔

    • exec() 根据正则，在字符串中查找，返回结果数组或null

      • // 注意这里是，全局搜索
        var str = 'abc123def456ghi789';
        var re = /\d+/g;
        var result1 = re.exec(str);
        var result2 = re.exec(str);
        var result3 = re.exec(str);
        var result4 = re.exec(str);
        var result5 = re.exec(str);
        
        console.log(result1);
        console.log(result2);
        console.log(result3);
        console.log(result4);
        console.log(result5);
        
        
        // 结果数组：  （循环找）
        // ["123", index: 3, input: "abc123def456ghi789", groups: undefined]
        // ["456", index: 9, input: "abc123def456ghi789", groups: undefined]
        // ["789", index: 15, input: "abc123def456ghi789", groups: undefined]
        // null
        // ["123", index: 3, input: "abc123def456ghi789", groups: undefined]
        
        
        // 换一个写法
        
        
        var str = 'abc123def456ghi789';
        var re = /\d+/g;
        var result;
        while(result = re.exec(str)){
            console.log(result);
        }
        
        
        // 注意，赋值语句的返回值是等号右边的值
        

      • 没有 g 全局搜索，一直返回第一个

  • 字符串的相关方法

    • 方法	简介
      search()	在字符串中根据正则进行查找匹配，返回首次匹配到的索引，找不到返回 -1
      match()	在字符串中根据正则进行查找匹配，返回一个数组，找不到返回null
      replace()	使用替换字符串替换掉匹配到的子字符串，可以使用正则
      split()	分隔字符串为数组，可以使用正则

    •       var str = "abc123def4567ghi890";
        
            console.log(str.search(/\d+/g));
            // 3
            // search 只能找到第一个的索引，没有那么强大
        
            console.log(str.match(/\d+/g));
            // ['123', '4567', '890']
            // match 返回所有匹配的结果
            console.log(str.match(/\d+/));
            console.log(str.match(/\d+/));
            // ['123', index: 3, input: 'abc123def4567ghi890', groups: undefined]
            // 不加 全局搜索 的match   每次都返回第一个的详细数组
        
            console.log(str.replace(/[a-z]+/g, "*"));
            // *123*4567*890
        
            console.log(str.split(/\d+/));
            console.log(str.split(/\d+/g));
            // ['abc', 'def', 'ghi', '']
            // split  有没有全局搜索都一样
      

• 正则表达式的应用

  • 表单验证

Other

• Banner轮播图

  • if(i == idx % 5)
    // 0、1、2、3、4 % 5 的结果都是它们本身，而5 % 5为 0
    

• 返回顶部动画

  • 固定定位元素

• 垂直菜单