20230328----重返学习-正则基础-正则匹配

day-037-thirty-seven-20230328-正则基础-正则匹配

正则表达式

正则：RegExp，专门对字符串进行一系列验证和捕获操作。是JavaScript中11个引用数形之一。

正则的作用

1. 匹配：验证一下（手机号、密码、身份证号…）格式是否正确
2. 捕获：从一串字符串中获取想要的内容

正则语法

• 正则写法

  • 构造函数法： new RegExp(元字符,修饰符);

  • 字面量法： /元字符/修饰符

    • 两个斜线又叫定界符，所以字面量法也叫定界符法。
    • 字面量法一定要写内容

    let reg = new RegExp();//构造函数法
    console.dir(reg);
    let reg2 = /o/;//字面量法--->定界符法，字面量法一定要写内容。
    
    //构造函数法： new RegExp(元字符,修饰符);
    //字面量法： /元字符/修饰符
    let reg = new RegExp('w','i');
    let reg2 = /w/i;
    

• 注意

  • 对元字符需要区分大小写
    • \d : 0-9随机1位数
  • 元字符一般一定要有
  • 修饰符可有可无
    • 修饰符 i ： 不区分大小写

let str = "hello Apple to you";
let reg1 = /apple/;
console.log([reg1], reg1.test(str));
let reg2 = /Apple/;
console.log([reg2], reg2.test(str));
let reg3 = /apple/i;
console.log([reg3], reg3.test(str));
let reg4 = new RegExp("apple");
console.log([reg4], reg4.test(str));
let reg5 = new RegExp("Apple");
console.log([reg5], reg5.test(str));
let reg6 = new RegExp("apple", "i");
console.log([reg6], reg6.test(str));

常用方法

正则对象方法

• 正则对象.test(字符串) 查看字符串是否匹配 成功true 失败false

字符串方法

• 字符串.match(正则对象) 把满足正则的内容，获取出来
  • 默认情况下，只会捕获满足正则条件的第一个
    • 加上修饰符g，就会捕获所有满足正则条件的每一个

构造函数法与字面量法区别

1. 构造函数法 元字符可以使用变量，字面量法元字符无法使用变量
2. 字符串中特殊字符需要转义（字符串的特色）
   • 转义符\
     • 字符串中没有 \(单杠)
       • \\双杠代表单杠字符串的含义
   • 构造函数法如果遇到特殊字符，需要转义，前面多加\，变成多杠

let str = '8'
let reg1 = /\d/;// \d : 0-9随机一位数
console.log("reg1.test(str)--->", reg1.test(str))
let reg2 = new RegExp('\\d','');// \d : 0-9随机一位数
console.log("reg2.test(str)--->", reg2.test(str))

let str = "\"'\d";
let reg1 = /"/; //
console.log("reg1.test(str)--->", reg1.test(str));
let reg2 = new RegExp("\"'", ""); //
console.log("reg2.test(str)--->", reg2.test(str));

元字符

• 字符集

  • 普通字符集-中括号[]相关
    1. [abc] : 匹配指定集合中的任意一个字符
    2. [^abc] : 不能匹配指定集合的任意一个字符
       • [^xxx] : 除了xxx之外的任意内容
    3. [0-9] : 中括号里减号-表示连字符，用于表示从连字符前的字符到连字符后的字符中间的字符编号
       • [0-9] : 匹配0-9任意一个数字
       • [a-z] : 匹配a-z任意一个小写字母
       • [A-Z] : 匹配A-Z任意一个大写字母
       • [A-z] : 匹配A-Z与a-z与[与\与]与^与_与`
       • [\u4e00-\u9fa5] 中文汉字 [一-龥]
  • 特殊含义字符集-简写
    • \d: 0-9随机一个数字
    • \D: 不能是数字
    • \w: 字母、数字、下划线
    • \W: 非 字母、数字、下划线
    • \s：匹配空格
    • \S: 匹配非空格
    • . :除回车(\r)和换行(\n)的任意内容
      • 元字符中.有特殊含义, 想要特殊含义消失，要用反斜线转义 —> \.
        • 转义其实是让特殊字符变成普通字符的
    • \b 匹配单词边界
    • \B 匹配非单词边界

• 单词边界

  • 概念

    • 单词与符号之间的边界就叫单词边界，符号与单词之间才会有边界
      • 单词与单词之间没单词边界
      • 符号与符号之间没单词边界
    • 单词：英文单词 英文字母 数字 [a-zA-Z0-9]
    • 符号： [^a-zA-Z0-9] 字符串开头 字符串末尾

      • 如：中文符号 英文符号 空格 制表符 换行 中文汉字 字符串开头 字符串末尾

      • 单词左右什么都没有，也属于单词边界。即字符串开头与末尾也属于单词边界。

        let str="hello";
        let reg=/\bhello\b/; 
        console.log(reg.test(str));
        

  • 单词边界与非单词边界并不占用字符数量

    let str="我hello4";
    let reg=/^\b(hello)\B$/; 
    console.log(reg.test(str));//false
    let reg1=/^[^a-zA-Z0-9]{1}\b(hello)\B[a-zA-Z0-9]{1,}$/; 
    console.log(reg1.test(str));//true
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-steSsD0o-1679997518730)(./单词边界示意图.png)]

• 数量词

  • 普通数量词-花括号
    • {x} 出现x次
    • {x,y} 出现x到y次
    • {x,} 出现大于等于x次
  • 简写
    • ? 0次或1次
    • * 0次或多次
    • + 1次或多次

• 预查

  • (?=xxx) 后面必须紧邻xxx，正向预查

    let str="donot";
    let reg=/do(?=not)/; 
    console.log(reg.test(str));//true
    

    • (?=xxx)括号中的东西，不计入字符

      let str = "donot";
      let reg1 = /^do(?=not)$/;
      console.log(reg1.test(str)); //false
      let reg = /^do(?=not)[a-z]{3}$/;
      console.log(reg.test(str)); //true
      

  • (?!xxx) 后面不能紧邻xxx，负向预查

    let str="donot";
    let reg=/do(?!not)/; 
    console.log(reg.test(str));//false
    

    • (?!xxx)括号中的东西，不计入字符

• 捕获与匹配

  • ?: 只匹配不捕获

• 分组与选择

  • () 分组
  • | 选择，或者

• ^与$相关

  • ^ : 以xxx开头
  • $ : 以xxx结尾
  • ^xxx$ : 以xxx开头并且以xxx结尾
    • 中间的内容是几个内容，字符串也必须是几个内容，长度要一致

修饰符

• 修饰符

  • i : 不区分大小写

    • 默认情况下

  • g : 全局匹配

    • 默认情况下，只会捕获 满足正则条件的第一个。加了g，会捕获 所有的满足正则条件的每一个

      {
        let str="Hello One two one three ONE";
        let reg=/one/i;
        console.log(str.match(reg));//['One', index: 6, input: 'Hello One two one three ONE', groups: undefined]
      }
      {
        let str="Hello One two one three ONE";
        let reg=/one/ig;
        console.log(str.match(reg));//['One', 'one', 'ONE']
      }
      

  • m : 多行匹配

    • 默认情况下，字符串只有末尾才算是一个结尾。加了m，一个换行\n或字符串末尾就算一个结尾。

      {
        let str="Hello One\n two a\n one three ONE";
        console.log(str);
        let reg=/a$/;//false
        console.log(reg.test(str));
      }
      {
        let str="Hello One\n two a\n one three ONE";
        console.log(str);
        let reg=/a$/m;//true
        console.log(reg.test(str));
      }
      

练习题

//1. 验证一个字符串 是否以 http://  https:// 开头
// let str="https://www.baidu.com"
// let reg=/^http(s)?:\/\//;
// console.log(reg.test(str));

//2.手机号 11位  开头1
// let str="16619816985";
// //let reg=/^1[3-9]\d{9}$/;
// let reg=/^(\+86|0086)?1[3-9]\d{9}$/;
// console.log(reg.test(str));

// 3.身份证  18位  最后1位 X x 数字
//         15位
// let str='130828199312080617';
// let reg=/^\d{15}(\d{2}[0-9Xx])?$/;
// console.log(reg.test(str));

//4.中文姓名  \u4e00-\u9fa5  迪丽·热巴
//  let str="迪丽·热巴"
//  let reg=/^[\u4e00-\u9fa5]{2,}(·[\u4e00-\u9fa5]{2,})?$/;
//  console.log(reg.test(str));

//5. 数字、字母、下划线 6-16位
// let reg=/^\w{6,16}$/;

//6. 13-65

//   13-19  1[3-9]
//   20-29  2[0-9]
//   30-39  3[0-9]
//   40-49  4[0-9]
//   50-59  5[0-9]   [2-5]\d
//   60-65  6[0-5]
let str="33";
let reg=/^(1[3-9]|[2-5]\d|6[0-5])$/
//let reg=/^[13-65]$/;// 1 3-6 5
console.log(reg.test(str));

正则插件

• vscode插件 any-rule
  • 搜索any-rule，下载并安装
  • ctrl+shift+p，搜索正则大全并点击
  • 搜索想要正则，就会插入想要的正则

正则属性

私有属性

• 私有属性–通过实例来访问
  • global:是否是全局匹配，是否添加修饰符g true/false
  • ignoreCase：否是不区分大小写，是否添加修饰符i true/false
  • multiline：是否是多行匹配，是否添加修饰符m true/false
  • source: 正则“元字符内容的字符串”写法
  • lastIndex: 开始匹配的位置 或 下次开始匹配的位置

静态属性

静态属性–通过构造函数来访问

• $1–>$9
  • $1 匹配成功的第一个小括号里面的值，默认空字符串
  • $2 匹配成功的第2个小括号里面的值，默认空字符串
  • …
  • $9 匹配成功的第9个小括号里面的值，默认空字符串

公有方法

公有属性–通过实例来访问

• test() : 是否匹配成功 成功true 失败 false 会修改lastIndex的值
• exec() ：捕获，每调用一次，就会捕获一个,返回的都是数组 0：捕获值 1：$1 2:$2
  • 会修改lastIndex的值
• compile():加快编译的速度（了解）

let str="aaa apple Apple APPLE"
let reg=/apple/ig;
//console.dir(reg)
console.dir(RegExp)

do{
    console.log(reg.lastIndex);//0 9 15 21
}while(reg.test(str))// test() 会修改lastIndex的值

例子

let str=new String("123");
console.dir(str);

//  let str="1a2c aaa"
//  let reg=/1(a|b)2(c|d)/ig;
//  let res=reg.exec(str);
//  console.log(res);//[1a2c.....]
//  console.log(res[1]);
//  console.log(reg.exec(str));//null

// let str="aaa apple Apple APPLE"
// let reg=/apple/ig;
// console.dir(reg)

// console.log(reg.exec(str));//apple 
// console.log(reg.exec(str));//Apple
// console.log(reg.exec(str));//APPLE
// console.log(reg.exec(str));//null

//  let str="1a2c"
//  let reg=/1(a|b)2(c|d)/ig;
//  console.log(reg.test(str));
//  console.dir(RegExp);
//  console.dir(RegExp.$1);

// //捕获
let str="aaa apple Apple APPLE"
let reg=/apple/ig;
//console.dir(reg)
console.dir(RegExp)

do{
    console.log(reg.lastIndex);//0 9 15 21
}while(reg.test(str))// test() 会修改lastIndex的值

进阶参考