正则表达式基础知识

字面量创建正则表达式

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 = '[email protected]';
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="[email protected]" />
</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>