文章目录
从后盾人文档学习记录
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