JS基础 正则表达式

基础知识

正则表达式是用于匹配字符串中字符组合的模式，在 JavaScript 中，正则表达式也是对象。

• 正则表达式是在宿主环境下运行的，如 js/php/node.js 等
• 本章讲解的知识在其他语言中知识也是可用的，会有些函数使用上的区别

对比分析

与普通函数操作字符串来比较，正则表达式可以写出更简洁、功能强大的代码。

下面使用获取字符串中的所有数字来比较函数与正则的差异。

let hd = "wgchen2200blog9988";
let nums = [...hd].filter(a => !Number.isNaN(parseInt(a)));

console.log(nums.join("")); // 22009988

使用正则表达式将简单得多

let hd = "wgchen2200blog9988";
console.log(hd.match(/\d/g).join("")); // 22009988

创建正则

JS 提供字面量与对象两种方式创建正则表达式

字面量创建

使用 // 包裹的字面量创建方式是推荐的作法，但它不能在其中使用变量

let hd = "wgchen.com";
console.log(/u/.test(hd));//false

let hd = "wgchen_u_willem.com";
console.log(/u/.test(hd));//true

下面尝试使用 a 变量时将不可以查询

let hd = "wgchen_u_willem.com";
let a = "u";
console.log(/a/.test(hd)); //false

虽然可以使用 eval 转换为 js 语法来实现将变量解析到正则中，但是比较麻烦，所以有变量时建议使用下面的对象创建方式

let hd = "wgchen_u_willem.com";
let a = "u";
console.log(eval(`/${a}/`).test(hd)); //true

对象创建

当正则需要动态创建时使用对象方式

let hd = "csdn.net";
let web = "csdn";
let reg = new RegExp(web);
console.log(reg.test(hd)); //true

根据用户输入高亮显示内容，支持用户输入正则表达式

  
  wgchen



  wgchen.blog.csdn.net


  const content = prompt("请输入要搜索的内容，支持正则表达式");
  const reg = new RegExp(content, "g");

  let body = document
    .querySelector("#content")
    .innerHTML.replace(reg, str => {
      return `${str}`;
    });
    
  document.body.innerHTML = body;

通过对象创建正则提取标签

  wgchen.blog.csdn.net
  willem.name



function element(tag) {
  const html = document.body.innerHTML;
  let reg = new RegExp(".+", "g");
  return html.match(reg);
}
console.table(element("h1"));

选择符

| 这个符号带表选择修释符，也就是 | 左右两侧有一个匹配到就可以。

检测电话是否是上海或北京的坐机

let tel = "010-12345678";
//错误结果：只匹配 | 左右两边任一结果
console.log(tel.match(/010|020\-\d{7,8}/)); 

//正确结果：所以需要放在原子组中使用
console.log(tel.match(/(010|020)\-\d{7,8}/));

匹配字符是否包含 wgchen 或 willem

const hd = "wgchen";
console.log(/wgchen|willem/.test(hd)); //true

字符转义

转义用于改变字符的含义，用来对某个字符有多种语义时的处理。

假如有这样的场景，如果我们想通过正则查找 / 符号，但是 / 在正则中有特殊的意义。如果写成 /// 这会造成解析错误，所以要使用转义语法 /\// 来匹配。

const url = "https://wgchen.blog.csdn.net";
console.log(/https:\/\//.test(url)); //true

使用 RegExp 构建正则时在转义上会有些区别，下面是对象与字面量定义正则时区别

let price = 12.23;
//含义1: . 除换行外任何字符 	含义2: .普通点
//含义1: d 字母d   					 含义2: \d 数字 0~9
console.log(/\d+\.\d+/.test(price)); // true

//字符串中 \d 与 d 是一样的，所以在 new RegExp 时\d 即为 d
console.log("\d" == "d"); // true

//使用对象定义正则时，可以先把字符串打印一样，结果是字面量一样的定义就对了
console.log("\\d+\\.\\d+"); // \d+\.\d+

let reg = new RegExp("\\d+\\.\\d+");
console.log(reg.test(price)); // true

下面是网址检测中转义符使用

let url = "https://wgchen.blog.csdn.net";
console.log(/https?:\/\/\w+\.\w+\.\w+/.test(url)); // true

字符边界

使用字符边界符用于控制匹配内容的开始与结束约定。

边界符说明^匹配字符串的开始$匹配字符串的结束，忽略换行符

匹配内容必须以 www 开始

const hd = "www.wgchen.com";
console.log(/^www/.test(hd)); //true

匹配内容必须以 .com 结束

const hd = "www.wgchen.com";
console.log(/\.com$/.test(hd)); //true

检测用户名长度为 3~6 位，且只能为字母。如果不使用 ^ 与 $ 限制将得不到正确结果

  



  document
    .querySelector(`[name="username"]`)
    .addEventListener("keyup", function() {
      let res = this.value.match(/^[a-z]{3,6}$/i);
      console.log(res);
      console.log(res ? "正确" : "失败");
    });

元子字符是正则表达式中的最小元素，只代表单一（一个）字符 字符列表 元字符说明示例\d匹配任意一个数字[0-9]\D与除了数字以外的任何一个字符匹配[^0-9]\w与任意一个英文字母,数字或下划线匹配[a-zA-Z_]\W除了字母,数字或下划线外与任何字符匹配[^a-zA-Z_]\s任意一个空白字符匹配，如空格，制表符\t，换行符\n[\n\f\r\t\v]\S除了空白符外任意一个字符匹配[^\n\f\r\t\v].匹配除换行符外的任意字符 使用体验 匹配任意数字

let hd = "wgchen 2010";
console.log(hd.match(/\d/g)); //["2", "0", "1", "0"]

匹配所有电话号码

let hd = `
	张三:010-99999999,李四:020-88888888
`;

let res = hd.match(/\d{3}-\d{7,8}/g);

console.log(res); // (2) ['010-99999999', '020-88888888']

获取所有用户名

let hd = `
张三:010-99999999,李四:020-88888888`;

let res = hd.match(/[^:\d-,]+/g);

console.log(res); // (2) ['\n张三', '李四']

匹配任意非数字

console.log(/\D/.test(2029)); //false

匹配字母数字下划线

let hd = "hdcms@";
console.log(hd.match(/\w/g)); //["h", "d", "c", "m", "s"]

匹配除了字母,数字或下划线外与任何字符匹配

console.log(/\W/.test("@")); //true

匹配与任意一个空白字符匹配

console.log(/\s/.test(" ")); //true
console.log(/\s/.test("\n")); //true

匹配除了空白符外任意一个字符匹配

let hd = "hdcms@";
console.log(hd.match(/\S/g)); //["2", "0", "1", "0","@"]

如果要匹配点则需要转义

let hd = `wgchen@com`;
console.log(/wgchen.com/i.test(hd)); //true
console.log(/wgchen\.com/i.test(hd)); //false

使用 . 匹配除换行符外任意字符

使用 . 匹配除换行符外任意字符，下面匹配不到 willem.com 因为有换行符

const url = `
  https://wgchen.blog.csdn.net
  willem.com
`;

console.log(url.match(/.+/)[0]); 
//  https://wgchen.blog.csdn.net

使用 /s 视为单行模式（忽略换行）时，. 可以匹配所有

let hd = `
  
    wgchen
    willem
  
`;
let res = hd.match(/.*/s);
console.log(res[0]);

正则中空格会按普通字符对待

let tel = `010 - 999999`;
console.log(/\d+-\d+/.test(tel)); //false
console.log(/\d+ - \d+/.test(tel)); //true

匹配所有字符

可以使用 [\s\S] 或 [\d\D] 来匹配所有字符

let hd = `
  
    wgchen
    willem
  
`;
let res = hd.match(/[\s\S]+/);
console.log(res[0]);

模式修饰

正则表达式在执行时会按他们的默认执行方式进行，但有时候默认的处理方式总不能满足我们的需求，所以可以使用模式修正符更改默认方式。

修饰符说明i不区分大小写字母的匹配g全局搜索所有匹配内容m视为多行s视为单行忽略换行符，使用. 可以匹配所有字符y从 regexp.lastIndex 开始匹配u正确处理四个字符的 UTF-16 编码 i 将所有 wgchen.com 统一为小写

let hd = "wgchen.com WGCHEN.COM";
hd = hd.replace(/wgchen\.com/gi, "wgchen.com");
console.log(hd); // wgchen.com wgchen.com

g 修饰符可以全局操作内容

let hd = "wgchen_willem";
hd = hd.replace(/e/, "@");
console.log(hd); //没有使用 g 修饰符是，只替换了第一个
// wgch@n_willem

let dh = "wgchen_willem";
dh = dh.replace(/e/g, "@");
console.log(dh); //使用全局修饰符后替换了全部的 u
// wgch@n_will@m

m 用于将内容视为多行匹配，主要是对 ^ 和 $ 的修饰

将下面是将以 # 数字开始的课程解析为对象结构，学习过后面讲到的原子组可以让代码简单些

let hd = `
  #1 js,200元 #
  #2 php,300元 #
  #9 wgchen.com # willem
  #3 node.js,180元 #
`;
// [{name:'js',price:'200元'}]
let lessons = hd.match(/^\s*#\d+\s+.+\s+#$/gm).map(v => {
  v = v.replace(/\s*#\d+\s*/, "").replace(/\s+#/, "");
  [name, price] = v.split(",");
  return { name, price };
});

console.log(JSON.stringify(lessons, null, 2));

u 正确处理四个字符的 UTF-16 编码

每个字符都有属性，如 L 属性表示是字母，P 表示标点符号，需要结合 u 模式才有效。其他属性简写可以访问属性的别名 (opens new window)网站查看。

//使用\p{L}属性匹配字母
let hd = "wgchen2010.不断发布技术博客，加油！";
console.log(hd.match(/\p{L}+/u));

//使用\p{P}属性匹配标点
console.log(hd.match(/\p{P}+/gu));

字符也有 unicode 文字系统属性 Script=文字系统，下面是使用 \p{sc=Han} 获取中文字符 han 为中文系统，其他语言请查看 文字语言表

let hd = `
张三:010-99999999,李四:020-88888888`;
let res = hd.match(/\p{sc=Han}+/gu);

console.log(res); // (2) ['张三', '李四']

使用 u 模式可以正确处理四个字符的 UTF-16 字节编码

let str = "𝒳𝒴";
console.table(str.match(/[𝒳𝒴]/)); //结果为乱字符"�"

console.table(str.match(/[𝒳𝒴]/u)); //结果正确 "𝒳"

lastIndex 返回或者设置正则表达式开始匹配的位置

RegExp对象 lastIndex 属性可以返回或者设置正则表达式开始匹配的位置

• 必须结合 g 修饰符使用
• 对 exec 方法有效
• 匹配完成时，lastIndex 会被重置为 0

let hd = `wgchen不断分享技术博客，wgchen网址是 wgchen.blog.csdn.net`;
let reg = /wgchen(.{2})/g;

reg.lastIndex = 10; //从索引10开始搜索

console.log(reg.exec(hd));
console.log(reg.lastIndex);

reg = /\p{sc=Han}/gu;
while ((res = reg.exec(hd))) {
  console.log(res[0]);
}

y 模式后如果从 lastIndex 开始匹配不成功就不继续匹配了

我们来对比使用 y 与 g 模式，使用 g 模式会一直匹配字符串

let hd = "wgchen";
let reg = /g/g;

console.log(reg.exec(hd)); // ['g', index: 1, input: 'wgchen', groups: undefined]
console.log(reg.lastIndex); // 2

console.log(reg.exec(hd)); // null
console.log(reg.lastIndex); // 0

console.log(reg.exec(hd)); // ['g', index: 1, input: 'wgchen', groups: undefined]
console.log(reg.lastIndex); // 2

但使用 y 模式后如果从 lastIndex 开始匹配不成功就不继续匹配了

let hd = "uwgchenucs";
let reg = /u/y;

//['u', index: 0, input: 'uwgchenucs', groups: undefined]
console.log(reg.exec(hd)); 
console.log(reg.lastIndex); //1
console.log(reg.exec(hd)); //null
console.log(reg.lastIndex); //0

因为使用 y 模式可以在匹配不到时停止匹配，在匹配下面字符中的 qq 时可以提高匹配效率

let hd = `包明远QQ群:11111111,999999999,88888888
wgchen不断分享技术文章，wgchen博客网址是 wgchen.blog.csdn.net`;

let reg = /(\d+),?/y;
reg.lastIndex = 7;
while ((res = reg.exec(hd))) console.log(res[1]);

原子表

在一组字符中匹配某个元字符，在正则表达式中通过元字符表来完成，就是放到 [] (方括号)中。

使用语法 原子表 说明 [] 只匹配其中的一个原子 [^] 只匹配 " 除了 " 其中字符的任意一个原子 [0-9] 匹配0-9任何一个数字 [a-z] 匹配小写a-z任何一个字母 [A-Z] 匹配大写A-Z任何一个字母 实例操作 使用 [] 匹配其中任意字符即成功

使用 [] 匹配其中任意字符即成功，下例中匹配 ue 任何一个字符，而不会当成一个整体来对待

const url = "wgchen.com";
console.log(/ue/.test(url)); //false
console.log(/[ue]/.test(url)); //true

日期的匹配

let tel = "2022-02-23";
console.log(tel.match(/\d{4}([-\/])\d{2}\1\d{2}/));
// (2) ['2022-02-23', '-', index: 0, input: '2022-02-23', groups: undefined]

获取 0~3 间的任意数字

const num = "2";
console.log(/[0-3]/.test(num)); //true

匹配 a~f 间的任意字符

const hd = "e";
console.log(/[a-f]/.test(hd)); //true

顺序为升序否则将报错

const num = "2";
console.log(/[3-0]/.test(num)); //SyntaxError

字母也要升序否则也报错

const hd = "wgchen.com";
console.log(/[f-a]/.test(hd)); //SyntaxError

获取所有用户名

let hd = `
张三:010-99999999,李四:020-88888888`;

let res = hd.match(/[^:\d-,]+/g);

console.log(res); // (2) ['\n张三', '李四']

原子表中有些正则字符不需要转义，如果转义也是没问题的，可以理解为在原子表中. 就是小数点

let str = "(wgchen.com)+";
console.table(str.match(/[().+]/g));

//使用转义也没有问题
console.table(str.match(/[\(\)\.\+]/g));

下面是使用原子表知识删除所有标题

  wgchen
  blog/h1>
  csdn


  const body = document.body;
  const reg = /[\s\S]**/g;
  let content = body.innerHTML.replace(reg, "");
  document.body.innerHTML = content;

原子组

• 如果一次要匹配多个元子，可以通过元子组完成
• 原子组与原子表的差别在于原子组一次匹配多个元子，而原子表则是匹配任意一个字符
• 元字符组用 () 包裹

下面使用原子组匹配 h1 标签，如果想匹配 h2 只需要把前面原子组改为 h2 即可。

const hd = `wgchen.com`;
console.log(/.+/.test(hd)); //true

基本使用

没有添加 g 模式修正符时只匹配到第一个，匹配到的信息包含以下数据

变量说明0匹配到的完整内容1,2....匹配到的原子组index原字符串中的位置input原字符串groups命名分组

在 match 中使用原子组匹配，会将每个组数据返回到结果中

• 0 为匹配到的完成内容
• 1/2 等 为原子级内容
• index 匹配的开始位置
• input 原始数据
• groups 组别名

let hd = "wgchen.com";
console.log(hd.match(/wgch(en)\.(com)/)); 
//(3) ['wgchen.com', 'en', 'com', index: 0, input: 'wgchen.com', groups: undefined]

下面使用原子组匹配标题元素

let hd = `
  wgchen
  csdn博客
  willem
`;

console.table(hd.match(/ {
  const value = e.target.value.trim();
  const regs = [/^[a-zA-Z0-9]{5,10}$/, /[A-Z]/];
  let state = regs.every(v => v.test(value));
  console.log(state ? "正确！" : "密码必须包含大写字母并在5~10位之间");
});

禁止贪婪

正则表达式在进行重复匹配时，默认是贪婪匹配模式，也就是说会尽量匹配更多内容，但是有的时候我们并不希望他匹配更多内容，这时可以通过?进行修饰来禁止重复匹配

使用 说明 *? 重复任意次，但尽可能少重复 +? 重复1次或更多次，但尽可能少重复 ?? 重复0次或1次，但尽可能少重复 {n,m}? 重复n到m次，但尽可能少重复 {n,}? 重复n次以上，但尽可能少重复

下面是禁止贪婪的语法例子

let str = "aaa";
console.log(str.match(/a+/)); //aaa
console.log(str.match(/a+?/)); //a
console.log(str.match(/a{2,3}?/)); //aa
console.log(str.match(/a{2,}?/)); //aa

将所有 span 更换为 h4 并描红，并在内容前加上 wgchen-

  
    wgchen
    willem.com
    ycc.com
  



  const main = document.querySelector("main");
  const reg = /([\s\S]+?)/gi;
  main.innerHTML = main.innerHTML.replace(reg, (v, p1) => {
    console.log(p1);
    return `地址-${p1}`;
  });

下面是使用禁止贪婪查找页面中的标题元素

  
    wgchen.com
  
  ycc.com
  
  



  let body = document.body.innerHTML;
  let reg = /[\s\S]*?/gi;
  console.table(body.match(reg));

全局匹配 问题分析

下面是使用 match 全局获取页面中标签内容，但并不会返回匹配细节

  wgchen.com
  willem.com
  ycc



  function elem(tag) {
    const reg = new RegExp(".+?", "g");
    return document.body.innerHTML.match(reg);
  }
  console.table(elem("h1"));

matchAll

在新浏览器中支持使用 matchAll 操作，并返回迭代对象

需要添加 g 修饰符

let str = "wgchen";
let reg = /[a-z]/ig;
for (const iterator of str.matchAll(reg)) {
  console.log(iterator);
}

在原型定义 matchAll 方法，用于在旧浏览器中工作，不需要添加 g 模式运行

String.prototype.matchAll = function(reg) {
  let res = this.match(reg);
  if (res) {
    let str = this.replace(res[0], "^".repeat(res[0].length));
    let match = str.matchAll(reg) || [];
    return [res, ...match];
  }
};
let str = "wgchen";
console.dir(str.matchAll(/(G)/i));

exec

使用 g 模式修正符并结合 exec 循环操作可以获取结果和匹配细节

  wgchen.com
  willem.com
  ycc



  function search(string, reg) {
    const matchs = [];
    while ((data = reg.exec( string))) {
      matchs.push(data);
    }
    return matchs;
  }
  console.log(search(document.body.innerHTML, /[\s\S]+?/gi));

使用上面定义的函数来检索字符串中的网址

let hd = `https://baidu.com  
https://www.sina.com.cn
https://www.wgchen.com`;

let res = search(hd, /https?:\/\/(\w+\.)?(\w+\.)+(com|cn)/gi);
console.dir(res);

function search(string, reg) {
  const matchs = [];
  while ((data = reg.exec( string))) {
    matchs.push(data);
  }
  return matchs;
}

字符方法

下面介绍的方法是 String 提供的支持正则表达式的方法

search

search() 方法用于检索字符串中指定的子字符串，也可以使用正则表达式搜索，返回值为索引位置

let str = "wgchen.com";
console.log(str.search("com")); // 7

使用正则表达式搜索

let str = "wgchen.com";
console.log(str.search(/\.com/i)); // 6

match 直接使用字符串搜索

let str = "wgchen.com";
console.log(str.match("com")); 
// ['com', index: 7, input: 'wgchen.com', groups: undefined]

使用正则获取内容，下面是简单的搜索字符串

let hd = "wgchen";
let res = hd.match(/c/);

console.log(res); 
// ['c', index: 2, input: 'wgchen', groups: undefined]
console.log(res[0]); //匹配的结果 c
console.log(res['index']); //出现的位置 2

如果使用 g 修饰符时，就不会有结果的详细信息了（可以使用exec），下面是获取所有h1~6的标题元素

let body = document.body.innerHTML;
let result = body.match(/[\s\S]+?/g);
console.table(result);

matchAll 返回迭代对象

在新浏览器中支持使用 matchAll 操作

let str = "wgchen";
let reg = /[a-z]/ig;
for (const iterator of str.matchAll(reg)) {
  console.log(iterator);
}

split 字符串或正则表达式分隔字符串

用于使用字符串或正则表达式分隔字符串，下面是使用字符串分隔日期

let str = "2023-02-12";
console.log(str.split("-")); //["2023", "02", "12"]

如果日期的连接符不确定，那就要使用正则操作了

let str = "2023/02-12";
console.log(str.split(/-|\//));
// (3) ['2023', '02', '12']

* replace 字符替换，也可以进行正则替换

replace 方法不仅可以执行基本字符替换，也可以进行正则替换，下面替换日期连接符

let str = "2023/02/12";
console.log(str.replace(/\//g, "-")); //2023-02-12

替换字符串可以插入下面的特殊变量名：

变量 说明 $$ 插入一个 "$"。 $& 插入匹配的子串。 $` 插入当前匹配的子串左边的内容。 $' 插入当前匹配的子串右边的内容。 $n 假如第一个参数是 RegExp 对象，并且 n 是个小于100的非负整数，那么插入第 n 个括号匹配的字符串。提示：索引是从1开始 在 wgchen 前后添加三个 =

let hd = "=wgchen=";
console.log(hd.replace(/wgchen/g, "$`$`$&$'$'"));
// ===wgchen===

电话号用 - 连接

let hd = "(010)99999999 (020)8888888";
console.log(hd.replace(/\((\d{3,4})\)(\d{7,8})/g, "$1-$2"));
// 010-99999999 020-8888888

把所有教育汉字加上链接 https://www.baidu.com

  在线教育是一种高效的学习方式，教育是一生的事业


  const body = document.body;
  body.innerHTML = body.innerHTML.replace(
    /教育/g,
    `$&`
  );

为链接添加上https ，并补全 www.

  
    
      csdn博客
    
    willem
    雅虎
    http://www.baidu.com
  


  const main = document.querySelector("body main");
  const reg = /(