正则

一.什么是正则?

1. 正则也叫规则表达式(书写一段规则,用于匹配一段字符串是否符合规则)

2. 创建方式

   • 字面量的形式
   • 内置构造函数

   // 1. 字面量的形式
   const reg = /abc/
    // 2. 内置构造函数
    const reg1 = new RegExp('abc')
    console.log(reg)
    console.log(reg1)
   

二.正则的常用方法(匹配和捕获)

1. 匹配

   • test
   • 匹配字符串是否符合正则规则
   • 符合---true
   • 不符合 --- false
   • 语法: 正则.test(字符串)

        const reg = /abc/   // 要求字符串中 包含 abc
        const str = 'qwertyui'
        const str1 = 'qwertyuiabc'
​
        console.log(reg.test(str))  // false
        console.log(reg.test(str1))  // true
        console.log(reg.test('1234567890'))  // false

2.捕获

• 语法: 正则.exec(字符串)

  1.没有捕获到: 直接返回一个null
  2.捕获到了
      2.1 没有小括号也没g的情况,永远捕获的都是下标0开始的第一个符合条件的
      2.2 没有小括号,但是有修饰符g的情况
          *第一捕获完成后,第二次开始的时候,会从第一次铺货结束的位置开始
          *第三次开始的时候.会从第二次捕获结束的位置开始
          *当所有的匹配项都匹配完成后,会返回一个null
          *当再次捕获的时候,就从下标0重新开始
      2.3 有小括号
          下标0还是我们正常捕获到的内容
          从下标1开始,就是每个小括号捕获到的内容
  

三.正则的元字符

1. 正则表达式的符号由那些组成

   • 元字符(正则表达式的规则符号)
   • 修饰符(修饰整个正则表达式的符号)

• 元字符 === 普通元字符

1.\d        表示一位(一个)数组(0-9)
2.\D        表示一位非数字(出来0-9)
3.\w        表示数字(0-9)字母(a-zA-Z)下划线(_)其中的一个
4.\W        表示除了数字(0-9)字母(a-zA-Z)下划线(_) 这些的某一个字符
5.\s        表示一位空白字符
6.\S        表示一位非空白字符
7. .        表示一位非换行的任意字符
8.\         表示转义符
                把有意义的符号,转为没有意义的文本
                  将没有意义的文本,转为有意义的符号
​
​

• 修饰符* (正则的标识符)*

• 书写在正则外边,用于描述整个正则表达式

  1. i 忽略大小写

  2. g 全局

             const reg1 = /^[a-c]$/i // 忽略大小写
             console.log(reg1.test('a'))  // true
             console.log(reg1.test('A'))  // true
     

             // 2.2 有修饰符 g
             // const reg = /\d{3}/g
             // console.log(reg.exec('z123xc456vb789nm000'))    // 123
             // console.log(reg.exec('z123xc456vb789nm000'))    // 456
             // console.log(reg.exec('z123xc456vb789nm000'))    // 789
             // console.log(reg.exec('z123xc456vb789nm000'))    // 000
             // console.log(reg.exec('z123xc456vb789nm000'))    // null
             // console.log(reg.exec('z123xc456vb789nm000'))    // 123
     

四.正则边界元字符

1. ^ 表示开头

2. $ 表示结尾

           const reg2 = /^\d/    // 表示字符串开头是一个数字
           // console.log(reg2.test('abc123def')) // false
           // console.log(reg2.test('123def'))    // true
   ​
           const reg3 = /\d$/    // 表示字符串结尾是一个数字
           // console.log(reg3.test('abc123def')) // false
           // console.log(reg3.test('abc123')) // true
   ​
           const reg4 = /^\d$/    // 表示字符串只能是一个数字
           console.log(reg4.test('abc123def')) // false
           console.log(reg4.test('123def'))    // false
           console.log(reg4.test('123'))       // false
           console.log(reg4.test('1'))         // true
   

五.正则的限定元字符

1. 正则的限定元字符表示 前边一个符号出现多少次

   1. *        表示 0~正无穷次
   2. +        表示 1~正无穷次
   3. ?        表示 0~1次
   4. {n}      表示 限定 n 次, 不能多也不能少
   5. {n,}     表示 最少 n 次
   6. {n,m}    表示 最少 n 次, 最多 m 次
   

六.正则的特殊元字符

1. ()
 含义1: 当成一个整体
 含义2: 单独捕获
2. |
  或
  字符为 或 左右两边的 都行
3. []
   包含
   注意: [abcd] 包含其中一个即可 [] 实际代表的就是 一位字符
4. [^]
    非
    注意: [^abcd] 只要不是他们四个中的一个即可 [^] 实际代表的就是 一位字符
5. -
    到(至)
    通常与包含和非一起使用
    [0-9]   数字 0~9 中的一个   \d
    [^0-9]  不是数字 0~9 中的 一个      \D
    [a-z]   小写 字母a~z
    [A-Z]   大写 字母A~Z

七.正则的重复元字符

1. 符号: \1 \2 ..... (代表第几个小括号的值)

          const reg = /^(abc|def)\1$/ // 小括号内是什么 \1 的位置就应该是什么
           console.log(reg.test('abcdef')) // false
           console.log(reg.test('abcabc')) // true
           console.log(reg.test('defabc')) // false
           console.log(reg.test('defdef')) // true
   ​
           const reg1 = /^(abc|def){2}$/   // 小括号的内容, 出现两次, 但是每次的值, 可以不同
           console.log(reg1.test('abcdef')) // true
           console.log(reg1.test('abcabc')) // true
           console.log(reg1.test('defabc')) // true
           console.log(reg1.test('defdef')) // true
   ​
           const reg2 = /^<(p|span)></\1>$/
           console.log(reg2.test('<span></span>')) // true
           console.log(reg2.test('<p></p>'))   // true
           console.log(reg2.test('<p></span>'))    // false
   

八.正则的两大特性

1. 正则的两大特性

   • 懒惰

     • 正常捕获字符串的时候,每次都从下标0开始
     • 解决方法: 给正则添加一个修饰符 g
     • 能多拿就多拿

   • 贪婪

     • 每次在捕获的时候,会尽可能的多捕获一些东西
     • 解决: 在原有的修饰符后添加一个 ? 然后相当于开启非贪婪模式
     • 能少拿就少拿

   贪婪限定符
       *
       +
       ?
       {n,}
       {n,m}
   非贪婪限定符
       *?
       +?
       ??
       {n,}?
       {n,m}?
   

       const str = '<div class="box" id="box1"><span></span></div>'
       const reg = /<div.*>/   // 贪婪模式
       console.log(reg.exec(str))
   ​
       const reg1 = /<div.*?>/ // 非贪婪模式
       console.log(reg1.exec(str))
   

九.创建正则表达式的区别

const reg = /\w/ig;
// const reg1 = new RegExp('\w', 'ig');
//如果想要正则表达式为\w   \w
const reg1 = new RegExp('\w', 'ig');
/*
new RegExp('\w','ig')
会把'\w'  的w转化为一个具有特殊含义的字符,所以并没有意义
*/

十.正则字符串的方法

1. 字符串的方法(search , match ,repalce)

   • search 语法: 字符串.search(正则)

     1. 找到: 返回第一次出现的下标
     2. 没找到: 返回-1

   • match 语法: 字符串.match(正则)

     作用: 
      当正则没有添加修饰符g的时候,作用类似于  正则.exec()
         捕获到的时候,是一个数组,数组下标0的位置是捕获到的值
         多次捕获的时候,每次都从下标0开始捕获
         没有捕获到的时候,返回一个null
         
       当正则添加修饰符g的时候
         捕获到就是一个数组,数组里的成员是捕获到每一个值
         没有捕获到的时候,返回一个null
     

     • replace 语法: 字符串.repalce(正则,要替换的字符)
     • 作用: 通过正则找到对应的字符,将其替换