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

本文链接：https://blog.csdn.net/weixin_46318413/article/details/122386041

本文通过实例讲解了正则表达式的多种应用场景，包括密码验证、贪婪模式、标签替换等，并介绍了常用的正则方法如matchAll、exec、search及match。

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

正则表达式（第四期）

二十七、批量使用正则完成密码验证
二十八、禁止贪婪
二十九、标签替换的禁止贪婪使用
三十、使用matchAll进行全局匹配
三十一、为低端浏览器定义matchAll方法
三十二、使用exec完成全局匹配
三十三、字符串的正则方法search和match
三十四、字符串正则方法matchAll和split
三十五、$符在正则替换中的使用
三十六、原子组在替换中的使用技巧

二十七、批量使用正则完成密码验证

<!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="password" />
    <script>
        const input = document.querySelector("[name='password']");
        input.addEventListener('keyup', e => {
            const value = e.target.value;
            //定义正则数组
            const regs = [/[A-Z]/, /^[a-z0-9]{5,10}$/i];
            //检测数组元素是否全部符合指定条件，全部符合返回true
            let state = regs.every(e => e.test(value));
            console.log(state ? '正确' : '错误');
        })
    </script>
</body>

</html>

二十八、禁止贪婪

let str = 'daiiii';
//使用?表示取前面符号最少的那一个(0)，实现禁止贪婪
//* 表示0个或多个
console.log(str.match(/ai*/)); //aiiii
console.log(str.match(/ai*?/)); //a

console.log(str.match(/ai{2,4}/)); //aiiii
console.log(str.match(/ai{2,4}?/)); //aii

//?表示0个或1个
console.log(str.match(/ai?/)); //ai
console.log(str.match(/ai??/)); //a

二十九、标签替换的禁止贪婪使用

<!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>
    <main>
        <span>11</span>
        <span>22</span>
        <span>33</span>
    </main>
    <script>
        //把span标签换为h2标签
        const main = document.querySelector('main');
        const reg = /<span>([\s\S]+?)<\/span>/gi;
        main.innerHTML = main.innerHTML.replace(reg, (e, p1) => {
            return `<h2>${p1}</h2>`
        })
    </script>
</body>

</html>

三十、使用matchAll进行全局匹配

<!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>matchAll</title>
</head>

<body>
    <main>
        <h1>111</h1>
        <h2>222</h2>
        <h3>333</h3>
    </main>
    <script>
        let main = document.querySelector('main');
        let reg = /<(h[1-6])>([\s\S]+?)<\/\1>/gi;
        let hd = main.innerHTML.matchAll(reg); //迭代器
        let contents = [];
        for (let interator of hd) {
            contents.push(interator[2])
        }
        console.table(contents)
    </script>
</body>

</html>

在这里插入图片描述

三十一、为低端浏览器定义matchAll方法

// 低端浏览器中没有matchAll的方法
// 给String原型加上matchAll的方法
String.prototype.matchAll = function(reg) {
    let res = this.match(reg);
    if (res) {
        let str = this.replace(res[0], '^'.repeat(res[0].length));
        let match = str.matchAll(reg) || [];
        return [res, ...match];
    }
}
let str = 'DaiiDai';
console.log(str.matchAll(/(da)i/i))
/*
0: (2) ['Dai', 'Da', index: 0, input: 'DaiiDai', groups: undefined]
1: (2) ['Dai', 'Da', index: 4, input: '^^^iDai', groups: undefined]
*/

三十二、使用exec完成全局匹配

<!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>exec进行全局匹配</title>
</head>

<body>
    <main>
        <h1>111</h1>
        <h2>222</h2>
        <h3>333</h3>
    </main>
    <script>
        function search(str, reg) {
            let result = [];
            while ((res = reg.exec(str))) {
                result.push(res);
            }
            return result;
        }
        let match = search(document.querySelector('main').innerHTML, /<(h[1-6])>[\s\S]+?<\/\1>/gi);
        console.table(match)
    </script>
</body>

</html>

在这里插入图片描述

三十三、字符串的正则方法search和match

let str = 'Daii';
//search返回目标位置
console.log(str.search('i')); //2
console.log(str.search('h')); //-1(找不到)
console.log(str.search(/a/)); //1

//match
console.log(str.match(/i/)); //['i', index: 2, input: 'Daii', groups: undefined]
console.log(str.match(/i/g)); //['i', 'i']

三十四、字符串正则方法matchAll和split

let str = 'Daii';
//matchAll会生成一个迭代器
for (const iterator of str.matchAll(/i/g)) {
    console.log(iterator)
}
/*
    ['i', index: 2, input: 'Daii', groups: undefined]
    ['i', index: 3, input: 'Daii', groups: undefined]
*/

//split也可以使用正则进行匹配分割
const date = '2000-02-02';
console.log(date.split(/[-\/]/)); //(3) ['2000', '02', '02']

三十五、$符在正则替换中的使用

let str = '2000-02-02';
console.log(str.replace(/-/g, '/')); //2000/02/02

// $1,$2就是正则按顺序对应小括号里面的小正则 捕获到的内容。
let phone = '(010)99999999 (020)8888888';
let reg = /\((\d{3})\)(\d{7,8})/g;
console.log(phone.replace(reg, '$1-$2')) //010-99999999 020-8888888

// $` $' $&
let name = "=1dai=";
//$`指的是正则匹配到的前面的内容
console.log(name.replace(/dai/, '$`')); //=1=1=(dai替换成=1)
//$'指的是正则匹配到的后面的内容
console.log(name.replace(/dai/, "$'")); //=1==(dai替换成=)
//$&指的是匹配到的内容
console.log(name.replace(/dai/, "$&")); //=1dai=(dai替换成dai)

三十六、原子组在替换中的使用技巧

<!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>将网址替换成https以及加上www.</title>
</head>

<body>
    <a href="http://www.baidu.com"> 百度</a>
    <a id="" href="https://baidu.com">百度</a>
    <h1>https://www.baidu.com</h1>
</body>
<script>
    const body = document.body;
    let reg = /(<a.*href=['"])(http)(:\/\/)(www\.)?/gi;
    body.innerHTML = body.innerHTML.replace(reg, (v, ...args) => {
        args[1] += 's';
        args[3] = args[3] || 'www.';
        return args.splice(0, 4).join('')
    })
</script>

</html>