Web APIs 第七天 正则表达式

一.正则表达式

1.什么是正则表达式

• 正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。
• 通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式。
• 在 JavaScript中，正则表达式也是对象

2.正则表达式的作用

• 表单验证（匹配）
• 过滤敏感词（替换）
• 字符串中提取我们想要的部分（提取)

3.语法

正则分为两步:

• 定义规则
• 查找

定义正则表达式语法：
let 变量名 = /表达式/
其中 / / 是正则表达式字面量
判断是否有符合规则的字符串： test() 方法 用来查看正则表达式与指定的字符串是否匹配,有返回true，否则返回false

        // 定义正则表达式
        let reg = /a/
        
        // 正则有test 方法 测试字符串中是否有符合正则模式的，有返回true，否则返回false
        console.log(reg.test('acb'))  //true
        console.log(reg.test('tgvs'))  //false

检索（查找）符合规则的字符串： exec() 方法 在一个指定字符串中执行一个搜索匹配,如果匹配成功，exec() 方法返回一个数组，否则返回null

        let reg2 = '廖东'
        let str = `天不生我廖东哥,前端开发皆BUG`
        let str2 = '前端程序员'
        console.log(reg2.exec(str))  //数组
        console.log(reg2.exec(str2))  // null

二.元字符

• 普通字符: 大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。
• 元字符(特殊字符） 是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
• 比如，规定用户只能输入英文26个英文字母，普通字符的话 abcdefghijklm…..
• 但是换成元字符写法： [a-z]

1.预定类

1.png

2.正则优先级

或 | 优先级最低 （）优先级最高

<script>
        // 正则的优先级

        // 需求：匹配a或者b或者c

        // | 优先级最低   左右两边都是个单独的整体
        console.log(/f|boot/.test('f'))     //t
        console.log(/f|boot/.test('foot'))  //t
        console.log(/f|boot/.test('boot'))  //t
        console.log(/f|boot/.test('boo'))   //f
        console.log(/f|boot/.test('foo'))   //t 
        console.log(/f|boot/.test('oot'))   //f

        // () 优先级最高
        // 匹配的是 foot 或 boot
        console.log(/(f|b)oot/.test('f'))    //f
        console.log(/(f|b)oot/.test('foo'))  //f
        console.log(/(f|b)oot/.test('boo'))  //f
        console.log(/(f|b)oot/.test('oot'))  //f
        console.log(/(f|b)oot/.test('foot')) //t
        console.log(/(f|b)oot/.test('boot')) //t
    </script>

3.字符类元字符

• [ ] 匹配字符集合
• 比如 /[abc]/ 匹配 匹配a或b或c 任意一个

• [ ] 自带了 或 的含义

  
  
  2.png
• 在 [] 里面可以写 - 表示范围
  • /[0-9]/ 匹配0-9范围任意一个数字
  • [a-zA-Z0-9] 匹配a-z A-Z 0-9 任意一个
• 在 [] 里面可以写 ^ 表示取反
  • [^abc] 匹配非 a b c 的任意字符

4.边界符

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

3.png

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

        // ^ $ 一起使用
        //以 chuan 开头以及结尾
        // ^ $ 一起使用  精确匹配  写啥匹配啥
        // 使用场景: 表单校验
        console.log(/^chuan$/.test('chuang'))  //false
        console.log(/^chuan$/.test('dachuan'))  //false
        console.log(/^chuan$/.test('chuanchuan')) //false
        console.log(/^chuan$/.test('chuan')) //true

5.量词

量词用来 设定某个模式出现的次数

4.png

 // * >=0 精确匹配
        // a 为0次及以上  开头结尾
        console.log(/^a*$/.test(''))    //t
        console.log(/^a*$/.test('a'))   //t
        console.log(/^a*$/.test('aa'))  //t
        console.log(/^a*$/.test('aab')) //f

        // 量词就近修饰  匹配 chuann 
        console.log(/chuan{2}/.test('chuanchuan'))  // false

        // 加个括号 {2}就是 修饰整个chuan
        console.log(/(chuan){2}/.test('chuanchuan'))  // true

6.替换和修饰符

• replace 替换
  语法： 字符串.replace(正则表达式, '替换的文本')
• 修饰符
  • i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
  • g 是单词 global 的缩写，匹配所有满足正则表达式的结果

    <script>
        let str = '  abc def  abcx  yzABCsff  '

        // 需求：将所有的空格去除掉
        // trim()  去除首尾空格

        // 字符串有replace方法
        //  语法： 字符串.replace(正则表达式, '替换的文本')
        //  使用正则匹配找到所以空格 替换为 ''(空字符)

        console.log(str)
        console.log(str.replace(/\s/,''))

        //正则修饰符  
        // g  global  全局匹配搜索   找所以的 
        console.log(str.replace(/\s/g,''))

        // i  ignore  忽略大小写
        // console.log(str.replace(/a/,'x'))
        console.log(str.replace(/a/ig,'x'))

    </script>