正则表达式
1. 基础知识
- 正则表达式是用于匹配字符串组合模式（增删改查），在js中表达式也是对象
- 拥有宿主环境才能运行
2. 示例展示
两种不同的表现形式
let hd = "dfsdfsd12121fccs";
let nums = [...hd].filter(a => !Number.isNaN(parseInt(a)));
console.log("字符串1", nums);
console.log("字符串2", hd.match(/\d/g).join(" "))
3. 正则的创建
- 字面量创建
let xx = "sasaeefe123";
let a = "a";
// console.log(/a/.test(xx));这样直接报错不会解析其中的这个变量
//如果使用其中的变量
console.log(eval(`/${
a}/`).test(xx));
//eval是直接将字符串转换成变量
console.log(/a/.test(xx)); //true
- 对象创建
//根据用户输入显示高亮
let con = prompt("请输入要检测的内容，及规则");
let reg = new RegExp(con, "g");
let ww = document.getElementById("content");
ww.innerHTML = ww.innerHTML.replace(reg, search => {
return `<span style="color:red">${
search}</span>`;
console.log(search);
});
// \w==>表示是字母，数字，下划线
// \. ==>表示所有字符
4. 选择符的应用
let tel = "010-9999999";
console.log(/aa|0/.test(tel));
let tel = "010-9999999";
console.log(/aa|0/.test(tel))//true;
console.log(/010\-\d{7,8}|121\-\d{7,8}/.test(tel)) //true
console.log(/（010|121）\-\d{7,8}/.test(tel)) //true
// 注：符号一般需要转译\-,{}表示在什么范围之间，
//原子表[ ]与原子组()中的选择符
let reg = /[12345]/
let reg1 = /（12|34）/
let hd = '12'
console.log(hd.match(reg))
console.log(hd.match(reg1))
//原子表[ ]就是匹配中括号里的任意一个字符
//原子组（）表示是一个整体里面执行完成执行后面的
5. 转义应用
let pri = 12344.32;
console.log(/\d+\.\d+/.test(pri));
// . 由两层含义 1. 表示除换行外所有字符 2. 普通的 . \d 表示0-9的数值
- 但是在对象中表示不一致
let pri = 1213.22
let reg = new RegExp("\\d+\\.\\d+")
console.log(reg.test(pri));
// 因为在字符串中存在转义过程 \d=>d \\d=>\d
- 网址中简单校验
let url = 'https://www.xiaotian.com'
console.log(/https?:\/\/w+\.\w+\.\w+/.test(url)) // true
// ? =》 匹配前面的子表达式零次或一次 有或无
// 在正则中//只允许出现一对为边界符
6. 字符边界约束
<input type="text" name="user" />
<div id="text"></div>
<script>
document
.querySelector('[name="user"]')
.addEventListener("blur", function(e) {
let val = e.target.value;
document.getElementById("text").innerText = /^\d$/.test(val)? "符合"
: "不符合";
});
</script>
// ^表示匹配字符串的开始 $匹配字符串的结束，忽略换行符
7. 元字符
// 1数值与空白
let val = '大汉:010-23424324，小虎:010-45324321'
console.log(val.match(/[^-\d:,\s]+/g))
//在原子表中的^==[^]表示除了
// 2 w与W元字符
let email= '[email protected]'
console.log(email.match(/^\d+@\w+\.\w+$/))
//
// 3 . 元字符
let url1 = "https://www.baidu.com";
console.log(url1.match(/https?:\/\/\w+\.\w+\.\w+/));
// 如果有空格
let url2 = "https: //www.baidu.com";
console.log(url2.match(/https?:\s+\/\/\w+\.\w+\.\w+/));
// 4 . 所有的字符
let val = `<span> 12was@_ 23</span>`;
console.log(val.match(/<span>[\d\D]+/<\/span>/));
;
| 元字符 | 说明 | 示例 |
|---|---|---|
| \d | 匹配任意一个数字 | [0-9] |
| \D | 匹配非任意数字 | [^0-9] |
| \w | 匹配字母数字下划线 | [a-zA-Z0-9_] |
| \W | 匹配非字母数字下划线 | [^a-zA-Z0-9_] |
| \s | 匹配空白字符 | [\n\f\r\t\v] |
| \S | 匹配非空白字符 | [^\n\f\r\t\v] |
| . | 匹配除换行符的任意字符 | [^\n] |
8. 模式修正符
// 1. i与g修饰符
//i表示不区分大小写字母的匹配 g表示全局
let val = "[email protected]";
console.log(val.match(/a/gi));
let changeVal = val.replace(/i/gi, "i");
console.log(changeVal);
// 2. m修饰符表示用于将内容视为多行匹配，主要是对 ^和 $ 的修饰
let changeVal = val.match(/^\s*#\d+\s+.+\s+#$/gm).map((x) => {
x = x.replace(/\s*#\d+\s*/, "").replace(/\s+#/, "");
[name, value] = x.split(",");
return {
name, value };
});
console.log(changeVal);
//3. 带有L属性的字符 正确处理四个字符的 UTF-16 编码
let val = "daydayup,天天向上,加油u";
console.log(val.match(/\p{L}/gu));
console.log(val.match(/\p{P}/gu));
et hd = `
张三:010-99999999,李四:020-88888888`;
let res = hd.match(/\p{sc=Han}+/gu);
console.log(res);
// 4. RegExp对象lastIndex 属性可以返回或者设置正则表达式开始匹配的位置
//必须结合 g 修饰符使用
//对 exec 方法有效
//匹配完成时，lastIndex 会被重置为0
let hd = `后盾人不断分享视频教程，后盾人网址是 houdunren.com`;
let reg = /后盾人(.{2})/g;
reg.lastIndex = 10; //从索引10开始搜索
console.log(reg.exec(hd));
console.log(reg.lastIndex);
// lastIndex 能够获取记录上次一的点
reg = /\p{sc=Han}/gu;
while ((res = reg.exec(hd))) {
console.log(res[0]);
}
// 5. 从 regexp.lastIndex 开始匹配 不成功的时候就不匹配了
let hd = "udunren";
let reg = /u/g;
console.log(reg.exec(hd));
console.log(reg.lastIndex); //3
console.log(reg.exec(hd));
console.log(reg.lastIndex); //3
console.log(reg.exec(hd)); //null
console.log(reg.lastIndex); //0
let hd = `后盾人QQ群:11111111,999999999,88888888
后盾人不断分享视频教程，后盾人网址是 houdunren.com`;
let reg = /(\d+),?/y;
reg.lastIndex = 7;
while ((res = reg.exec(hd))) console.log(res[1]);