字面量创建正则表达式
javascript
let source = "houdunren.com";
let val = "u";
console.log(eval(`/${val}/`).test(source)); // true
对象创建正则表达式
javascript
let source = "houdunren.com";
let val = "u";
let reg = new RegExp(val, "g");
console.log(reg.test(source)); // true
替换字符串中某个字符
javascript
<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>
选择符--或
javascript
let source = "010-9999999";
console.log(/(010|020)\-\d{7,8}/.test(source));
原子表与原子组中的选择符--或
javascript
let reg1 = /[123456]/; // 表示1||2||3||4||5||6
let reg2 = /(12|34)/; // 表示12||34
let source = "121234";
console.log(source.match(reg));
转义
javascript
let price = 23.34;
console.log(/\d+\.\d+/.test(price));
// \d 表示数值 0~9
// + 表示一个或多个
// . 表示除换行外任何字符,所以使用普通的点要转义
javascript
let price = 23.34;
let reg = new RegExp("\\d+\\.\\d+");
console.log(reg.test(price));
javascript
let url = 'https://www.houdunren.com';
console.log(/https?:\/\/\w+\.\w+\.\w+/.test(url));
// 加了?表示https和http都能匹配到
字符边界约束
javascript
let source = "34hfdgjd89";
console.log(/^\d$/.test(source));
// ^ 表示限定起始边界
// $ 表示限定结束边界
javascript
<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>
空白元字符
javascript
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元字符
javascript
let source = '1673258474@qq.com';
console.log(source.match(/^\w+@\w+\.\w+$/));
// \w 表示匹配所有字符(字母、数字、下划线)
// \W 表示匹配除了字母、数字、下划线
javascript
let username = prompt('请输入用户名');
console.log(/^[a-z]\w{4,9}$/i.test(username));
// i表示匹配时不区分大小写
点元字符
javascript
let source = 'houdunren-@_%***';
console.log(source.match(/.+/));
// . 表示匹配除了换行符之外的任何字符
匹配所有的字符
javascript
let source = `<span>houdunren @@@@ ***</span>`;
console.log(source.match(/<span>[\s\S]+<\/span>/));
console.log(source.match(/<span>[\d\D]+<\/span>/));
i与g模式修正符
javascript
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 表示全局匹配并且不区分大小写,没有先后顺序
多行匹配修正符
javascript
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个或多个
中文与字符属性
javascript
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属性
javascript
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模式
javascript
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);
}
// 从第五位开始匹配,匹配数字,如果下一位和正则匹配不上就不再匹配了,提高效率
原子表
javascript
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));
区间匹配
javascript
<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>
排除匹配
javascript
let source = `张三:010-99999999,李四:020-88888888`;
console.log(source.match(/[^\d:\-,]+/g));
原子表字符不解析
javascript
let source = '(houdunren).+';
console.log(source.match(/[.+]/gi));
原子表匹配所有内容
javascript
let source = `
houdunren
hdcms
`;
console.log(source.match(/.+/gs));
console.log(source.match(/[\s\S]+/[0]));
正则操作DOM元素
html
<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 表示组的别名
邮箱验证
html
<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>