正则表达式基础知识
字面量创建正则表达式
let source = "houdunren.com";
let val = "u";
console.log(eval(`/${val}/`).test(source)); // true
对象创建正则表达式
let source = "houdunren.com";
let val = "u";
let reg = new RegExp(val, "g");
console.log(reg.test(source)); // true
替换字符串中某个字符
<body><div class="content">houdunren.com</div>
</body>
<script>let con = prompt('请输入要检测的内容，支持正则');let reg = new RegExp(con, 'g');let div = document.querySelector('div');div.innerHTML = div.innerHTML.replace(reg, search => {return `<span style="color: red">${search}</span>`;})
</script>
选择符--或
let source = "010-9999999";
console.log(/(010|020)\-\d{7,8}/.test(source));
原子表与原子组中的选择符--或
let reg1 = /[123456]/; // 表示1||2||3||4||5||6
let reg2 = /(12|34)/; // 表示12||34
let source = "121234";
console.log(source.match(reg));
转义
let price = 23.34;
console.log(/\d+\.\d+/.test(price));
// \d 表示数值 0~9
// + 表示一个或多个
// . 表示除换行外任何字符，所以使用普通的点要转义
let price = 23.34;
let reg = new RegExp("\\d+\\.\\d+");
console.log(reg.test(price));
let url = 'https://www.houdunren.com';
console.log(/https?:\/\/\w+\.\w+\.\w+/.test(url));
// 加了?表示https和http都能匹配到
字符边界约束
let source = "34hfdgjd89";
console.log(/^\d$/.test(source));
// ^ 表示限定起始边界
// $ 表示限定结束边界
<body><input type="text" name="user" /><span></span>
</body>
<script>document.querySelector('[name="user"]').addEventListener('keyup', function() {let flag = this.value.match(/^[a-z]{3,6}$/);document.querySelector('span').innerHTML = flag ? '正确' : '失败';);
</script>
空白元字符
let source = `张三:010-99999999,李四:020-88888888`;
console.log(source.match(/\d{3}-\d{7,8}/g));
console.log(source.match(/[^-\d:,\s]+/g));
// \d 表示匹配数字
// \D 表示匹配除了数字
// ^ 表示除了
// \s 表示匹配空白
// \S 表示匹配除了空白
w和W元字符
let source = '1673258474@qq.com';
console.log(source.match(/^\w+@\w+\.\w+$/));
// \w 表示匹配所有字符（字母、数字、下划线）
// \W 表示匹配除了字母、数字、下划线
let username = prompt('请输入用户名');
console.log(/^[a-z]\w{4,9}$/i.test(username));
// i表示匹配时不区分大小写
点元字符
let source = 'houdunren-@_%***';
console.log(source.match(/.+/));
// . 表示匹配除了换行符之外的任何字符
匹配所有的字符
let source = `<span>houdunren @@@@ ***</span>`;
console.log(source.match(/<span>[\s\S]+<\/span>/));
console.log(source.match(/<span>[\d\D]+<\/span>/));
i与g模式修正符
let source = 'houdunren';
console.log(source.match(/u/i));
console.log(source.match(/u/g));
console.log(source.match(/u/gi));
console.log(source.replace(/u/gi, '@'));
// i 表示匹配时不区分大小写
// g 表示匹配时在全局进行匹配，而不是匹配一个就结束
// gi 表示全局匹配并且不区分大小写，没有先后顺序
多行匹配修正符
let source = `#1 js,200元 ##2 php,300元 ##9 houdunren.com # hahahaha#3 node.js,180元 #
`;
let lessons = source.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));
// * 表示0个或多个
// + 表示1个或多个
中文与字符属性
let source = 'houdunren2010,今天真好.';
console.log(source.match(/\p{L}/gu)); // 匹配字母
console.log(source.match(/\p{P}/gu)); // 匹配标点符号
console.log(source.match(/\p{sc=Han}/gu)); // 匹配中文
console.log(source.match(/[xy]/gu)); // 匹配宽字节lastIndex属性
let source = 'houdunren';
let reg = /\w/g;
console.log(reg.lastIndex); // 0
console.log(reg.exec(source));
console.log(reg.lastIndex); // 1
console.log(reg.exec(source));
// lastIndex 记录上一次搜索的位置
y模式
let source = '今天真好:1111111111,2222222222,3333333333,哈哈哈哈哈';
let reg = /(\d+),?/y;
reg.lastIndex = 5;
let qq = [];
while(let res = reg.exec(hd)) {qq.push(res[1]);console.log(qq);
}
// 从第五位开始匹配，匹配数字，如果下一位和正则匹配不上就不再匹配了，提高效率
原子表
let date = '2023-10-03';
let reg1 = /^\d{4}[-\/]\d{2}[-\/]\d{2}$/; // 这样写有bug
let reg2 = /^\d{4}([-\/])\d{2}\1\d{2}$/;
console.log(date.match(reg));
区间匹配
<body><input type="text" name="username" />
</body>
<script>let input = document.querySelector(`[name="username"]`);input.addEventListener("keyup", function() {console.log(this.value.match(/^[a-z]\w{3,6}$/i));});
</script>
排除匹配
let source = `张三:010-99999999,李四:020-88888888`;
console.log(source.match(/[^\d:\-,]+/g));
原子表字符不解析
let source = '(houdunren).+';
console.log(source.match(/[.+]/gi));
原子表匹配所有内容
let source = `houdunrenhdcms
`;
console.log(source.match(/.+/gs));
console.log(source.match(/[\s\S]+/[0]));
正则操作DOM元素
<body><p>今天</p><h1>哈哈哈哈 嘻嘻嘻</h1><h2>真好</h2><h3></h3>
</body>
<script>let body = document.body;let reg = /<(h[1-6])>[\s\S]*<\/\1>/gi;body.innerHTML = body.innerHTML.replace(reg, "");
</script>
原子组
index 表示从第几个字符开始匹配的
input 表示原始的字符串
group 表示组的别名
邮箱验证
<body><input type="text" name="email" value="6666666666@qq.com" />
</body>
<script>let mail = document.querySelector(`[name="email"]`).value;// let reg = /^[\w-]+@[\w-]+\.(com|org|cc|cn|net)$/i;let reg = /^[\w-]+@([\w-]+\.)+(com|org|cc|cn|net)$/i;console.log(mail.match(reg));
</script>