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

方朝端
134 阅读5分钟

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的值

进阶参考

avatar
文章
阅读
粉丝