JS正则随笔

最新推荐文章于 2021-12-23 17:24:45 发布

perwhy_wang

最新推荐文章于 2021-12-23 17:24:45 发布

阅读量117

点赞数

本文链接：https://blog.csdn.net/qq_38829069/article/details/108931518

版权

本文详述了JavaScript中的正则表达式创建方法、选择符、字符转义、字符边界、元子字符、模式修饰符等核心概念，并通过实例演示了如何使用search、match、split、replace等字符串方法与正则配合，以及正则对象的test和exec方法。还涵盖了断言匹配等高级用法，是JS正则学习的实用参考。

摘要由CSDN通过智能技术生成

从后盾人文档学习记录

1、创建正则

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

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

选择符

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

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

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

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

字符转义

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

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

字符边界

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

元子字符

元字符是正则表达式中的最小元素，只代表单一（一个）字符

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

模式修饰

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

原子表

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

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

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

原子组

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

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

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

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

引用分组

\n 在匹配时引用原子组， $n 指在替换时使用匹配的组数据。下面将标签替换为p标签

let hd = `
  <h1>houdunren</h1>
  <span>后盾人</span>
  <h2>hdcms</h2>
`;

let reg = /<(h[1-6])>([\s\S]*)<\/\1>/gi;
console.log(hd.replace(reg, `<p>$2</p>`));

分组别名

如果希望返回的组数据更清晰，可以为原子组编号，结果将保存在返回的 groups字段中

let hd = `
  <h1>houdunren</h1>
  <span>后盾人</span>
  <h2>hdcms</h2>
`;
let reg = /<(?<tag>h[1-6])>(?<con>[\s\S]*)<\/\1>/gi;
console.log(hd.replace(reg, `<p>$<con></p>`));

重复匹配

如果要重复匹配一些内容时我们要使用重复匹配修饰符，包括以下几种

因为正则最小单位是元字符，而我们很少只匹配一个元字符如a、b所以基本上重复匹配在每条正则语句中都是必用到的内容。

禁止贪婪

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

字符方法

search

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

let str = "houdunren.com";
console.log(str.search("com"));

使用正则表达式搜索

console.log(str.search(/\.com/i));

match

直接使用字符串搜索

let str = "houdunren.com";
console.log(str.match("com"));

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

let hd = "houdunren";
let res = hd.match(/u/);
console.log(res);
console.log(res[0]); //匹配的结果
console.log(res[index]); //出现的位置

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

let body = document.body.innerHTML;
let result = body.match(/<(h[1-6])>[\s\S]+?<\/\1>/g);
console.table(result);

split

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

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

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

let str = "2023/02-12";
console.log(str.split(/-|\//));

replace

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

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

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

replace 支持回调函数操作，用于处理复杂的替换逻辑

<body>
  <div class="content">
    后盾人不断更新优质视频教程
  </div>
</body>

<script>
  let content = document.querySelector(".content");
  content.innerHTML = content.innerHTML.replace("后盾人", function(
    search,
    pos,
    source
  ) {
    return `<a href="https://www.houdunren.com">${search}</a>`;
  });
</script>

正则方法

下面是 RegExp 正则对象提供的操作方法

test

如果匹配到返回真，没有匹配到返回假

exec

不使用 g 修饰符时与 match 方法使用相似，使用 g 修饰符后可以循环调用直到全部匹配完。

使用 g 修饰符多次操作时使用同一个正则，即把正则定义为变量使用
使用 g 修饰符最后匹配不到时返回 null

断言匹配

断言虽然写在扩号中但它不是组，所以不会在匹配结果中保存，可以将断言理解为正则中的条件。

(?=exp)

零宽先行断言 ?=exp 匹配后面为 exp 的内容

把后面是教程的后盾人汉字加上链接

<body>
  <main>
    后盾人不断分享视频教程，学习后盾人教程提升编程能力。
  </main>
</body>

<script>
  const main = document.querySelector("main");
  const reg = /后盾人(?=教程)/gi;
  main.innerHTML = main.innerHTML.replace(
    reg,
    v => `<a href="https://houdunren.com">${v}</a>`
  );
</script>

(?<=exp)

零宽后行断言 ?<=exp 匹配前面为 exp 的内容

匹配前面是houdunren 的数字

let hd = "houdunren789hdcms666";
let reg = /(?<=houdunren)\d+/i;
console.log(hd.match(reg)); //789

(?!exp)

零宽负向先行断言后面不能出现 exp 指定的内容
使用 (?!exp)字母后面不能为两位数字

let hd = "houdunren12";
let reg = /[a-z]+(?!\d{2})$/i;
console.table(reg.exec(hd));

(?<!exp)

零宽负向后行断言前面不能出现exp指定的内容

获取前面不是数字的字符

let hd = "hdcms99houdunren";
let reg = /(?<!\d+)[a-z]+/i;
console.log(reg.exec(hd)); //hdcms

perwhy_wang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS正则随笔

文章目录1、创建正则选择符字符转义字符边界元子字符模式修饰原子表原子组引用分组分组别名重复匹配禁止贪婪字符方法searchmatchsplitreplace正则方法testexec断言匹配(?=exp)(?<=exp)(?!exp)(?<!exp)从后盾人文档学习记录1、创建正则字面量创建使用//包裹的字面量创建方式是推荐的作法，但它不能在其中使用变量对象创建let hd = "houdunren.com";let web = "houdunren";let reg = new
复制链接

扫一扫