【正则表达式】讲清楚正则表达式——第三期（3/5）

@Dai

已于 2024-04-29 14:11:34 修改

阅读量378

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签：正则表达式前端 javascript html5 ecmascript

于 2022-01-01 20:19:46 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46318413/article/details/122268214

前端专栏收录该内容

49 篇文章

订阅专栏

本文深入讲解了正则表达式的原子组、DOM操作、邮箱验证、重复匹配等核心概念，并通过实例演示如何在实际项目中使用。掌握这些技巧，提升前端开发和数据验证能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【前端基础知识】讲清楚正则表达式——第二期（2/5）

十八、原子表字符不解析

let str = "(dai).+";
//()放到原子表中就是普通括号
console.log(str.match(/[()]/gi).concat());// ['(', ')']
//()不放在[]中就是原子组的意思
console.log(str.match(/[]()/gi));//null
//.在正则中表示匹配除了换行符外的所有字符
console.log(str.match(/.+/gi));//['(dai).+']
//.放在[]中表示匹配"."这个字符串
console.log(str.match(/[.+]/gi));//['.', '+']

十九、正则操作DOM元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用正则清除h1-6标签</title>
</head>

<body>
    <p>Dai</p>
    <h1>youkuaiyun.com
        sad
    </h1>
    <H2>baidu.com</H2>
    <script>
        let body = document.body;
        let reg = /<(h[1-6])>[\s\S]*<\/\1>/gi;
        body.innerHTML = body.innerHTML.replace(reg, "");
    </script>
</body>

</html>

在这里插入图片描述

二十、认识原子组

let str = `<h1>csdn</h1>
<h2>Dai</h2>
`
let reg = /<(h[1-6])>([\s\S]*)<\/\1>/i;
console.log(str.match(reg));

在这里插入图片描述

二十一、邮箱验证中原子组的使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原子组</title>
</head>

<body>
    <input type="text" name="email" />
    <span></span>
    <script>
        let mail = document.querySelector("[name = 'email']");
        let span = document.querySelector("span");
        mail.addEventListener('input', function () {
            let reg = /^[\w-]+@[\w-]+\.(com|org|cc|cn|net)$/i;
            span.innerHTML = reg.test(mail.value) ? '正确' : '错误'
        })
    </script>
</body>

</html>

二十二、原子组引用完成替换操作

let str = `
<h1>csdn</h1>
<span>前端Dai</span>
<h2>Dai</h2>
`;
let reg = /<(h[1-6])>(\w[\s\S]+)<\/\1>/gi;
str = str.replace(reg, (p0, p1, p2, p3) => {
    console.log("p0", p0);//正则匹配到的式子
    console.log("p1", p1);//第一个原子组
    console.log("p2", p2);//第二个原子组
    console.log("p3", p3);//index
    return `<div>${p3}</div>`
})
console.log(str)

在这里插入图片描述

二十三、嵌套分组与不记录组

let str = `
https://www.baidu.com
`;
let reg = /https:\/\/\w+\.\w+\.(com|cn|org)/i;
console.log(str.match(reg));
// 0: "https://www.baidu.com"
// 1: "com"
// groups: undefined
// index: 9
// input: "\n        https://www.baidu.com\n        "
// length: 2

//如果只想取“www.baidu.com”，那就加原子组
let reg1 = /https:\/\/(\w+\.\w+\.(com|cn|org))/i;
console.log(str.match(reg1));
// 0: "https://www.baidu.com"
// 1: "www.baidu.com"
// 2: "com"
// groups: undefined
// index: 9
// input: "\n        https://www.baidu.com\n        "
// length: 3

//如果不想要某个原子组的内容，就加?:
let reg2 = /https:\/\/(\w+\.\w+\.(?:com|cn|org))/i;
console.log(str.match(reg2));
// 0: "https://www.baidu.com"
// 1: "www.baidu.com"
// groups: undefined
// index: 9
// input: "\n        https://www.baidu.com\n        "
// length: 2

//提取域名
let url = `
https://www.sdadfda.com
http://dsafsa.com
`
let test = /https?:\/\/((?:\w+\.)?\w+\.(?:com|cn|org))/gi;
let urls = [];
while (res = (test.exec(url))) {
urls.push(res[1])
}
console.log(urls);//['www.sdadfda.com', 'dsafsa.com']

二十四、多种重复匹配基本使用

let str = 'hdddddd';
//+1表示1个或多个
console.log(str.match(/hd+/)[0]);//hdddddd
//*表示0个或多个
console.log(str.match(/hd*/)[0]);//hdddddd
//{}，可以指定匹配数量
console.log(str.match(/hd{1,2}/)[0]);//hdd
//?表示0个或1个
console.log(str.match(/hd?/)[0]);//hd

二十五、重复匹配对原子组影响与电话号正则

let str = 'hddd';
//如果对hd进行原子组，指的是对hd进行贪婪
console.log(str.match(/(hd)+/g)[0]);//hd

let tel = '010-99999999';
console.log(tel.match(/^0\d{2,3}-\d{7,8}$/)[0]);//010-99999999

二十六、网站用户名验证

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户名的验证</title>
</head>

<body>
    <input type="text" name="username" />
    <script>
        document.querySelector("[name='username']").addEventListener('keyup', e => {
            const value = e.target.value;
            let reg = /^[a-z][\w-]{2,7}$/i
            console.log(reg.test(value))
        })
    </script>
</body>

</html>