Web APIs - 06

正则表达式

正则表达式是一种字符串匹配的规则

使用场景：

• 例如验证表单：手机号表单要求用户只能输入11位的数字 (匹配)
• 过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等

  正则基本使用

  1. 定义规则

     const reg =  /表达式/
     

     • 其中/ /是正则表达式字面量
     • 正则表达式也是对象

     • 使用正则

       • test()方法 用来查看正则表达式与指定的字符串是否匹配
       • 如果正则表达式与指定的字符串匹配 ，返回true，否则false

    
      // 正则表达式的基本使用
      const str = 'web前端开发'
      // 1. 定义规则
      const reg = /web/
      // 2. 使用正则  test()
      console.log(reg.test(str))  // true  如果符合规则匹配上则返回true
      console.log(reg.test('java开发'))  // false  如果不符合规则匹配上则返回 false
    
  
  

  元字符

  • 是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
  • 比如，规定用户只能输入英文26个英文字母，换成元字符写法： /[a-z]/

    边界符

    正则表达式中的边界符用来提示字符所处的位置，主要有两个字符

    ^表示以谁开始

    $表示以谁结束

    
    （图片来源网络，侵删）

    如果 ^ 和 $ 在一起，表示必须是精确匹配

      
        // 元字符之边界符
        // 1. 匹配开头的位置 ^
        const reg = /^web/
        console.log(reg.test('web前端'))  // true
        console.log(reg.test('前端web'))  // false
        console.log(reg.test('前端web学习'))  // false
        console.log(reg.test('we'))  // false
        // 2. 匹配结束的位置 $
        const reg1 = /web$/
        console.log(reg1.test('web前端'))  //  false
        console.log(reg1.test('前端web'))  // true
        console.log(reg1.test('前端web学习'))  // false
        console.log(reg1.test('we'))  // false  
        // 3. 精确匹配 ^ $
        const reg2 = /^web$/
        console.log(reg2.test('web前端'))  //  false
        console.log(reg2.test('前端web'))  // false
        console.log(reg2.test('前端web学习'))  // false
        console.log(reg2.test('we'))  // false 
        console.log(reg2.test('web'))  // true
        console.log(reg2.test('webweb'))  // flase 
      
    
    

    量词

    量词用来设定某个模式重复次数

    注意： 逗号左右两侧千万不要出现空格

      
        // 元字符之量词
        // 1. * 重复次数 >= 0 次
        const reg1 = /^w*$/
        console.log(reg1.test(''))  // true
        console.log(reg1.test('w'))  // true
        console.log(reg1.test('ww'))  // true
        console.log('-----------------------')
        // 2. + 重复次数 >= 1 次
        const reg2 = /^w+$/
        console.log(reg2.test(''))  // false
        console.log(reg2.test('w'))  // true
        console.log(reg2.test('ww'))  // true
        console.log('-----------------------')
        // 3. ? 重复次数  0 || 1 
        const reg3 = /^w?$/
        console.log(reg3.test(''))  // true
        console.log(reg3.test('w'))  // true
        console.log(reg3.test('ww'))  // false
        console.log('-----------------------')
        // 4. {n} 重复 n 次
        const reg4 = /^w{3}$/
        console.log(reg4.test(''))  // false
        console.log(reg4.test('w'))  // flase
        console.log(reg4.test('ww'))  // false
        console.log(reg4.test('www'))  // true
        console.log(reg4.test('wwww'))  // false
        console.log('-----------------------')
        // 5. {n,} 重复次数 >= n 
        const reg5 = /^w{2,}$/
        console.log(reg5.test(''))  // false
        console.log(reg5.test('w'))  // false
        console.log(reg5.test('ww'))  // true
        console.log(reg5.test('www'))  // true
        console.log('-----------------------')
        // 6. {n,m}   n =