吃通js正则表达式

时间  2020-12-01
标签 css html 正则表达式 数组 浏览器 less 测试 优化 网站 栏目 JavaScript 繁體版
原文   原文链接

体验正则表达式的魅力：css

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

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

<body>

    <script>
        // 获取字符串中全部的数值
        let str = 'cyy2020cyy2xxx';

        //不使用正则的状况
        let nums = [...str].filter(item => !Number.isNaN(parseInt(item))).join('');
        console.log(nums);

        // 使用正则的状况
        let num2 = str.match(/\d/g).join('');
        console.log(num2);
    </script>
</body>

</html>

 

字面量建立正则表达式：html

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

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

<body>

    <script>
        let str = 'cyy2020cyy2xxx';

        console.log(/cyy/.test(str));

        //不能直接使用变量
        let word = 'cyy';
        console.log(/word/.test(str));

        //使用这种方式，使用变量
        console.log(eval(`/${word}/`).test(str));



    </script>
</body>

</html>

 

使用对象建立正则表达式：正则表达式

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

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

<body>
    <div>这里是cyy用来检测正则的测试文本~~~</div>

    <script>
        // let str = 'cyy2020cyy2xxx';

        // //第二个参数是模式
        // let reg = new RegExp('cyy', 'g');
        // console.log(reg.test(str));

        // //使用变量
        // let word = 'cyy';
        // let reg2 = new RegExp(word, 'g');
        // console.log(reg2.test(str));


        //demo
        let text = prompt('请输入要检测的文本，支持正则');
        let reg = new RegExp(text, 'g');
        let div = document.querySelector('div');
        div.innerHTML = div.innerHTML.replace(reg, search => {
            return `<span style="color:red;">${search}</span>`;
        });

    </script>
</body>

</html>

 

选择符的使用：数组

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

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

<body>

    <script>
        let str = 'cyy000';
        // |表明选择符，符号左边的表达式或者右边的表达式是否知足
        // 左边匹配的是cyy，而不是一个y
        console.log(/cyy|x/.test(str));


        let tel = '010-8888888';
        console.log(/^(010|020)\-\d{7,8}$/.test(tel));
    </script>
</body>

</html>

 

原子表与原子组中的选择符：浏览器

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

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

<body>

    <script>
        // 原子表
        let str = '1122334455';
        let reg = /[1234567]/;
        console.log(str.match(reg));


        //原子组
        let str2 = '1122334455';
        let reg2 = /(11|44)/g;
        console.log(str2.match(reg2));
    </script>
</body>

</html>

 

 

转义须要好好理解：less

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

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

<body>

    <script>
        // .表明除换行符外的全部字符
        // let price = 33.47;
        // console.log(/\d+\.\d+/.test(price));


        //对象建立的正则须要双重转义
        // let price = 33.47;
        // let reg = new RegExp('\d+\.\d+');
        // console.log(reg);
        // console.log(reg.test(price));

        let price = 33.47;
        let reg = new RegExp('\\d+\\.\\d+');
        console.log(reg);
        console.log(reg.test(price));

    </script>
</body>

</html>

 

字符边界约束：测试

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

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

<body>
    <input type="text" name='user'>
    <span style='color:red;'></span>

    <script>
        document.querySelector('[name=user]').addEventListener('keyup', function () {
            console.log(this.value);

            let flag = this.value.match(/^[a-z]{3,5}$/);
            document.querySelector('span').innerHTML = flag ? '成功' : '失败';
        });

    </script>
</body>

</html>

 

数值与空白元字符：优化

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

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

<body>

    <script>
        // let str = '20201111';
        // console.log(str.match(/\d/));
        // // 模式符g 全局匹配
        // console.log(str.match(/\d/g));


        //获取电话号码
        // let tel = "'姓名: 'cyy', 电话: 010-1111111; 姓名: 'cyy2', 电话: 030-99999999";
        // console.log(tel.match(/\d{3}-\d{7,8}/g));


        //获取中文 [^]表示方括号里面的都不要
        let tel = "'姓名: 'cyy', 电话: 010-1111111; 姓名: 'cyy2', 电话: 030-99999999";
        console.log(tel.match(/[^':,-\da-z\s;]+/g));


        //\d 数字 \D 非数字
        // let tel = "'姓名: 'cyy', 电话: 010-1111111; 姓名: 'cyy2', 电话: 030-99999999";
        // console.log(tel.match(/\D+/g));


        // \s匹配空白，包括空格和换行符
        // let str = ' 11\n';
        // console.log(str.match(/\s/g));


        // \S匹配非空白，包括空格和换行符
        let str = ' 11\n';
        console.log(str.match(/\S+/g));
    </script>
</body>

</html>

 

w与W元字符：网站

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

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

<body>

    <script>
        // \w 字母数字下划线
        // let str = 'cyy123_-@@';
        // console.log(str.match(/\w+/));


        // let email = '965794175@qq.com';
        // console.log(email.match(/^\w+@\w+\.\w+$/));


        // 5-10为字母数字下划线，而且是字母开头
        let user = prompt('请输入用户名');
        console.log(user.match(/^[a-z]\w{4,9}$/));
    </script>
</body>

</html>

 

点元字符的使用：ui

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

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

<body>

    <script>
        // . 除空白符以外的全部字符
        // let str = 'cswj+4!j@;;';
        // console.log(str.match(/.+/)); //这里的+是贪婪模式


        // .须要转义
        // let str = 'https://www.baidu.com';
        // console.log(str.match(/^https?:\/\/\w+\.\w+\.\w+$/)); 


        // .须要转义
        // let str = `
        // www.baidu.com
        // www.taobao.com
        // `;
        // console.log(str.match(/.+/));
        // // s模式符：忽略换行符
        // console.log(str.match(/.+/s)); 


        let tel = '010 - 12345678';
        console.log(tel.match(/\d{3} - \d{8}/));
        console.log(tel.match(/\d{3}\s-\s\d{8}/));
    </script>
</body>

</html>

 

如何精巧的匹配全部字符：

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

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

<body>

    <script>
        let str = `
        <span>
            cyy @@@
            hahahah
        </span>
        `;

        console.log(str.match(/[\w\W]+/));
        console.log(str.match(/[\d\D]+/));
    </script>
</body>

</html>

 

i与g模式修饰符：

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

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

<body>

    <script>
        let str = 'cyyCyy';
        console.log(str.match(/c/i));
        console.log(str.match(/c/g));
        console.log(str.match(/c/gi));

        console.log(str.replace(/c/gi, '@'));
    </script>
</body>

</html>

 

m多行匹配修正符实例：

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

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

<body>

    <script>
        let str = `
        #1 js,200元 #
        #2 html,104元 #
        #3 css # cyy
        `;
        let lessons = str.match(/^\s*#\d+\s+.+\s+#$/gm).map(item => {
            item = item.replace(/^\s*#\d+\s*/, '').replace(/\s+#/, '');
            [name, price] = item.split(',');
            return { name, price };
        });

        console.log(lessons);
    </script>
</body>

</html>

 

 

汉字与字符属性：

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

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

<body>

    <script>
        // u修饰符:正确处理四个字符的 UTF-16 编码
        //每一个字符都有属性，如L属性表示是字母，P 表示标点符号，须要结合 u 模式才有效。
        //其余属性简写能够访问 https://www.unicode.org/Public/UCD/latest/ucd/PropertyValueAliases.txt 网站查看。
        // let str = 'cyy2020.永远最棒棒~';
        // console.log(str.match(/\p{L}/gu));//字母
        // console.log(str.match(/\p{N}/gu));//数字
        // console.log(str.match(/\p{P}/gu));//标点符号

        //找中文
        //字符也有unicode文字系统属性 Script=文字系统，下面是使用 \p{sc=Han} 获取中文字符 han为中文系统
        //其余语言请查看 http://www.unicode.org/standard/supported.html
        // console.log(str.match(/\p{sc=Han}/gu));


        let str = '𝒳𝒴';
        console.log(str.match(/[𝒳𝒴]/));//单独匹配时乱码
        console.log(str.match(/[𝒳𝒴]/u));//正确识别宽字节
    </script>
</body>

</html>

 

lastIndex属性的做用：

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

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

<body>

    <script>
        let str = 'cyy is a girl';
        // console.log(str.match(/\w/));
        // console.log(str.match(/\w/g)); //没有组信息


        //非全局模式下lastIndex不会向后走
        // let reg = /\w/;
        // console.log(reg.exec(str));
        // console.log(reg.lastIndex);

        // console.log(reg.exec(str));
        // console.log(reg.lastIndex);

        // console.log(reg.exec(str));
        // console.log(reg.lastIndex);


        //全局模式下lastIndex会向后走
        let reg = /\w/g;
        // console.log(reg.exec(str));
        // console.log(reg.lastIndex);

        // console.log(reg.exec(str));
        // console.log(reg.lastIndex);

        // console.log(reg.exec(str));
        // console.log(reg.lastIndex);

        while (res = reg.exec(str)) {
            console.log(res);
        }
    </script>
</body>

</html>

 

有效率的y模式：

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

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

<body>

    <script>
        // y粘连模式，必须连续
        // let str = 'yycyyccc';

        // let reg = /yy/g;
        // console.log(reg.exec(str));
        // console.log(reg.lastIndex);

        // console.log(reg.exec(str));
        // console.log(reg.lastIndex);

        // console.log(reg.exec(str));
        // console.log(reg.lastIndex);


        // let reg = /yy/y;
        // console.log(reg.exec(str));
        // console.log(reg.lastIndex);

        // console.log(reg.exec(str));
        // console.log(reg.lastIndex);

        // console.log(reg.exec(str));
        // console.log(reg.lastIndex);


        let str = 'cyy的qq群是：1111111,2222222,3333333,cyy的年龄是：18';
        let reg = /(\d+),?/y;
        reg.lastIndex = 9;
        // console.log(reg.exec(str));
        // console.log(reg.exec(str));
        // console.log(reg.exec(str));

        let qq = [];
        while (res = reg.exec(str)) {
            qq.push(res[1]);
        }
        console.log(qq);
    </script>
</body>

</html>

 

原子表基本上使用：

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

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

<body>

    <script>
        // let str = '123456';
        // console.log(str.match(/[246]/g));


        // let str = '2020-11-28';
        // let str2 = '2020/11/28';
        // console.log(str.match(/^\d{4}[-\/]\d{2}[-\/]\d{2}$/g));
        // console.log(str2.match(/^\d{4}[-\/]\d{2}[-\/]\d{2}$/g));


        //分隔符必须一致
        let str = '2020-11/28';
        let str2 = '2020/11/28';
        console.log(str.match(/^\d{4}([-\/])\d{2}\1\d{2}$/g));
        console.log(str2.match(/^\d{4}([-\/])\d{2}\1\d{2}$/g));
    </script>
</body>

</html>

 

区间匹配：

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

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

<body>
    <input type="text" name='user'>

    <script>
        // let str = '1234';
        // console.log(str.match(/[0-9]+/g));


        // let str = 'abcd1234';
        // console.log(str.match(/[a-z]+/g));


        let input = document.querySelector('[name=user]');
        input.addEventListener('keyup', function () {
            console.log(this.value.match(/[a-z]\w{3,5}/));
        })
    </script>
</body>

</html>

 

排除匹配：

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

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

<body>
    <script>
        // let str = '1234';
        // console.log(str.match(/[12]/g));
        // console.log(str.match(/[^12]/g));


        let str = 'cyy是小仙女呀';
        console.log(str.match(/[^\w]+/g));
        console.log(str.match(/\p{sc=Han}+/gu));


    </script>
</body>

</html>

 

原子表字符不解析：

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

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

<body>
    <script>
        let str = '(cyy.)';
        // ()在这里表明原子组
        // console.log(str.match(/()/g));
        // ()在这里表明普通括号
        // console.log(str.match(/[()]/g));

        // .在这里表示除空白符外的全部字符
        console.log(str.match(/.+/g));
        // .在这里表示.符号自己
        console.log(str.match(/[.+]/g));


    </script>
</body>

</html>

 

使用原子表匹配全部内容：

 

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

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

<body>
    <script>
        let str = `
        cyy1
        cyy2
       `;
        console.log(str.match(/.+/));//没法匹配换行符
        console.log(str.match(/.+/s));//能够匹配换行符
        console.log(str.match(/[\s\S]+/));
        console.log(str.match(/[\d\D]+/));
        console.log(str.match(/[\w\W]+/));


    </script>
</body>

</html>

 

正则操做DOM：

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

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

<body>
    <p>p</p>
    <h1>h1</h1>
    <h3>h3</h3>

    <script>
        let reg = /<(h[1-6])>[\s\S]*<\/\1>/gi;
        document.body.innerHTML = document.body.innerHTML.replace(reg, '');


    </script>
</body>

</html>

 

认识原子组：

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

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

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


    </script>
</body>

</html>

 

邮箱验证中原子组的使用：

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

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

<body>
    <input type="email" name="email" value="965794175@qq.com.cn">
    <script>
        let reg = /[\w-]+@([\w-]+\.)+(com|cn|cc|net|org)/gi;
        let email = document.querySelector('[name=email]').value;
        console.log(email.match(reg));


    </script>
</body>

</html>

 

原子组引用完成替换操做：

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

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

<body>

    <script>
        let str = `
        <h1>h1</h1>
        <div>div</div>
        <h3>h3</h3>`;
        //把h1-h6替换成p
        let reg = /<(h[1-6])>([\s\S]+)<\/\1>/gi;
        console.log(str.match(reg));
        console.log(str.replace(reg, `<p>$2</p>`));

        let res = str.replace(reg, (p0, p1, p2) => {
            // console.log(p0, p1, p2);
            return `<p>${p2}</p>`;
        });
        console.log(res);


    </script>
</body>

</html>

 

嵌套分组与不记录组：

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

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

<body>

    <script>
        let str = `
        https://www.baidu.com
        http://www.baidu.com
        https://baidu.com
        `;
        //获取域名
        // ? 表示无关紧要
        // 圆括号里 ?: 表示不记录组
        let reg = /https?:\/\/((?:\w+\.)?\w+\.(?:com|cn|net|org|cc))/gi;
        // console.log(reg.exec(str));

        let urls = [];
        while (res = reg.exec(str)) {
            // console.log(res);
            urls.push(res[1]);//0是原数组，1是第一个分组
        }
        console.log(urls);

    </script>
</body>

</html>

 

多种重复匹配基本使用：

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

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

<body>

    <script>
        // let str = 'cyy';
        // + 1个或者多个，贪婪匹配
        // console.log(str.match(/cy+/));

        // let str = 'c';
        // * 0个或者多个，贪婪匹配
        // console.log(str.match(/cy*/));

        // let str = 'cy';
        // // ? 0个或者1个，贪婪匹配
        // console.log(str.match(/cy?/));

        let str = 'cyy';
        // {} 表示范围，贪婪匹配
        console.log(str.match(/cy{2,5}/));

    </script>
</body>

</html>

 

重复匹配对原子组的影响与电话号正则：

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

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

<body>

    <script>
        // let str = 'cyyyyycycycy';
        // console.log(str.match(/(cy)+/g));


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

    </script>
</body>

</html>

 

网站用户名验证 ：

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

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

<body>
    <input type="text" name='username'>

    <script>
        document.querySelector('[name=username]').addEventListener('keyup', (e) => {
            let value = e.target.value;
            //用户名3-8位，字母数字下划线，字母开头
            console.log(value.match(/^[a-z][\w-]{2,7}$/i));
        })

    </script>
</body>

</html>

 

批量使用正则完成密码验证：

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

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

<body>
    <input type="text" name='pwd'>

    <script>
        document.querySelector('[name=pwd]').addEventListener('keyup', (e) => {
            let value = e.target.value;
            //密码是数字或者字母5-10位，而且必须包含大写字母和数字
            let regs = [
                /^[a-z0-9]{5,10}$/i,
                /[A-Z]/,
                /\d/
            ];
            let res = regs.every(reg => reg.test(value));
            console.log(res);
        });

    </script>
</body>

</html>

 

禁止贪婪：

 

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

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

<body>

    <script>
        let str = 'cyyyyyy';
        // console.log(str.match(/cy+/));//默认贪婪
        // console.log(str.match(/cy+?/));//禁止贪婪

        // console.log(str.match(/cy*/));//默认贪婪
        // console.log(str.match(/cy*?/));//禁止贪婪

        // console.log(str.match(/cy{2,6}/));//默认贪婪
        // console.log(str.match(/cy{2,6}?/));//禁止贪婪

        // console.log(str.match(/cy{2,}/));//默认贪婪
        // console.log(str.match(/cy{2,}?/));//禁止贪婪

        console.log(str.match(/cy?/));//默认贪婪
        console.log(str.match(/cy??/));//禁止贪婪

    </script>
</body>

</html>

 

标签替换的禁止贪婪使用：

 

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

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

<body>
    <main>
        <span>cyy1</span>
        <span>cyy2</span>
        <span>cyy3</span>
    </main>

    <script>
        //把span换成h4，标红，前缀加上小可爱-

        const main = document.querySelector('main');
        // ?禁止贪婪
        let reg = /<span>([\s\S]+?)<\/span>/ig;
        main.innerHTML = main.innerHTML.replace(reg, (res, h1) => {
            return `<h4 style="color:red;">小可爱-${h1}</h4>`;
        });

    </script>
</body>

</html>

 

 

使用matchAll完成全局匹配：

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

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

<body>
    <h1>cyy1</h1>
    <h2>cyy2</h2>
    <h3>cyy3</h3>

    <script>
        let reg = /<(h[1-6])>([\s\S]+?)<\/\1>/ig;

        console.log(document.body.innerHTML.match(reg));
        console.log(document.body.innerHTML.matchAll(reg));

        let res = document.body.innerHTML.matchAll(reg);
        let arr = [];
        for (const iterator of res) {
            console.dir(iterator);
            arr.push(iterator[2]);
        }
        console.table(arr);


    </script>
</body>

</html>

 

 

 

为低端浏览器定义原型方法matchAll

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

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

<body>
    <h1>cyy1</h1>
    <h2>cyy2</h2>
    <h3>cyy3</h3>

    <script>

        String.prototype.matchAll = function (reg) {
            let res = this.match(reg);
            // console.log(res);
            if (res) {
                let str = this.replace(res[0], '^'.repeat(res[0].length));
                let match = str.matchAll(reg) || [];
                return [res, ...match];
            }
        }
        let body = document.body.innerHTML;
        let res = body.matchAll(/<(h[1-6])>([\s\S]+?)<\/\1>/ig);
        console.log(res);


    </script>
</body>

</html>

 

使用exec完成全局匹配：

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

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

<body>
    <h1>cyy1</h1>
    <h2>cyy2</h2>
    <h3>cyy3</h3>

    <script>

        // let str = 'cyyccyy';
        // let reg = /y/gi;//必须加上g修饰符，lastIndex才会发生改变
        // console.log(reg.exec(str));
        // console.log(reg.lastIndex);

        // console.log(reg.exec(str));
        // console.log(reg.lastIndex);

        // console.log(reg.exec(str));
        // console.log(reg.lastIndex);

        // console.log(reg.exec(str));
        // console.log(reg.lastIndex);

        // console.log(reg.exec(str));
        // console.log(reg.lastIndex);

        // let arr = [];
        // while (res = reg.exec(str)) {
        //     arr.push(res);
        // }
        // console.log(arr);


        let arr = [];
        function search(str, reg) {
            while (res = reg.exec(str)) {
                arr.push(res);
            }
            return arr;
        }
        search(document.body.innerHTML, /<(h[1-6])>[\s\S]+?<\/\1>/gi);
        console.log(arr);
    </script>
</body>

</html>

 

字符串正则方法search与match

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

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

<body>

    <script>

        // search 字符串的搜索
        // let str = 'yyccyy';
        // console.log(str.search('c'));
        // console.log(str.search(/c/g));


        // match 字符串的匹配
        // let str = 'yyccyy';
        // console.log(str.match('c'));
        // console.log(str.match(/c/g));


        let str = `
        https://www.baidu.com
        http://www.taobao.com.cn
        https://google.cn
        `;
        let reg = /https?:\/\/(\w+\.)?(\w+\.)+(com|cn|net|org|cc)/gi;
        console.log(str.match(reg));
    </script>
</body>

</html>

 

字符串正则方法matchAll与split

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

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

<body>

    <script>

        // search 字符串的搜索
        // let str = 'yyccyy';
        // console.log(str.search('c'));
        // console.log(str.search(/c/g));


        // match 字符串的匹配
        // let str = 'yyccyy';
        // console.log(str.match('c'));
        // console.log(str.match(/c/g));


        // let str = `
        // https://www.baidu.com
        // http://www.taobao.com.cn
        // https://google.cn
        // `;
        // let reg = /https?:\/\/(\w+\.)?(\w+\.)+(com|cn|net|org|cc)/gi;
        // console.log(str.match(reg));

        // let reg = /https?:\/\/(?:\w+\.)?(?:\w+\.)+(?:com|cn|net|org|cc)/gi;
        // let res = str.matchAll(reg);
        // for (const iterator of res) {
        //     console.log(iterator);
        // }


        let str = '2020-11-30';
        let str2 = '2020/11/30';
        console.log(str.split(/[-\/]/));
        console.log(str2.split(/[-\/]/));
    </script>
</body>

</html>

 

$符在正则替换中的使用：

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

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

<body>

    <script>

        // let str = '2020/11/30';
        // console.log(str.replace(/[\/]/, '-'));
        // console.log(str.replace(/[\/]/g, '-'));


        // let str = '(010)99999999 (020)8888888';
        // let reg = /\((\d{3,4})\)(\d{7,8})/g;
        // console.log(str.match(reg));
        // console.log(str.replace(reg, "$1-$2"));


        let str = '=cyy=';
        // $& 匹配到的内容  $` 匹配内容的左边  $' 匹配内容的右边
        console.log(str.replace(/cyy/, "$`可爱$&可爱$'"));
    </script>
</body>

</html>

 

 

$&使用

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

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

<body>
    <main>cyy喜欢吃炒年糕，cyy也喜欢吃汤年糕</main>

    <script>

        const main = document.querySelector('main');
        main.innerHTML = main.innerHTML.replace(/年糕/g, "<a href='http://www.baidu.com'>$&</a>")
    </script>
</body>

</html>

 

 

原子组在替换中的使用技巧：

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

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

<body>
    <main>
        <a href="http://www.baidu.com" style='color:pink'>baidu</a>
        <a id='link' href="http://baidu.com">baidu</a>
        <a href="http://google.com">baidu</a>
        <h4>http://www.baidu.com</h4>
    </main>


    <script>

        const main = document.querySelector('main');
        let reg = /(<a.*href=['"])(http)(:\/\/)(www\.)?(baidu)/gi;
        main.innerHTML = main.innerHTML.replace(reg, (v, ...args) => {
            console.log(args);
            args[1] += 's';
            args[3] = args[3] || 'www.';
            return args.splice(0, 5).join('');
        });
    </script>
</body>

</html>

 

原子组别名：

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

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

<body>

    <script>

        let str = `
      <h1>h1</h1>
      <span>span</span>
      <h4>h4</h4>
      `;
        // let reg = /<(h[1-6])>(.*?)<\/\1>/gi;
        // console.log(str.replace(reg, "<div>$2</div>"));

        //起别名
        let reg = /<(h[1-6])>(?<con>.*?)<\/\1>/gi;
        console.log(str.replace(reg, "<div>$<con></div>"));
    </script>
</body>

</html>

 

使用原子组别名优化正则：

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

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

<body>
    <main>
        <a href="https://www.baidu.com">baidu</a>
        <a href="https://www.taobao.com">taobao</a>
        <a href="https://www.google.com">google</a>
    </main>

    <script>
        // [{link:,title:}]

        const main = document.querySelector('main');
        // let reg = /<a.*?href=(['"])(?<link>.*?)\1>(?<title>.*?)<\/a>/i;
        // console.log(main.innerHTML.match(reg));

        let reg = /<a.*?href=(['"])(?<link>.*?)\1>(?<title>.*?)<\/a>/gi;
        let arr = [];
        for (const iterator of main.innerHTML.matchAll(reg)) {
            console.log(iterator['groups']);
            arr.push(iterator['groups']);
        }
        console.table(arr);
    </script>
</body>

</html>

 

 

正则方法test

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

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

<body>
    <input type="text" name='email'>

    <script>
        const mail = document.querySelector('[name=email]');

        mail.addEventListener('keyup', (e) => {
            let value = e.target.value;
            let res = /^[\w-]+@[\w+\.]+(com|cn|org|cc)$/i.test(value);
            console.log(res);
        })
    </script>
</body>

</html>

 

正则方法exec

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

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

<body>
    <main>
        cyy很是可爱，cyy到底有多可爱？baidu.com
    </main>

    <script>
        const mail = document.querySelector('main').innerHTML;
        let reg = /cyy/gi;
        // console.log(mail.match(reg));


        // console.log(reg.exec(mail));
        // console.log(reg.lastIndex);

        // console.log(reg.exec(mail));
        // console.log(reg.lastIndex);

        // console.log(reg.exec(mail));
        // console.log(reg.lastIndex);


        let count = 0;
        while (res = reg.exec(mail)) {
            count++;
        }
        console.log(count);
    </script>
</body>

</html>

 

？=  断言匹配：

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

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

<body>
    <main>
        cyy很是可爱，cyy可爱就可爱在……
    </main>

    <script>
        const main = document.querySelector('main');
        let reg = /cyy(?=可爱)/gi;
        main.innerHTML = main.innerHTML.replace(reg, '<a href="https://www.baidu.com">$&</a>');
    </script>
</body>

</html>

 

 

使用断言规范价格：

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

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

<body>

    <script>
        // 给全部金钱补上 .00 格式
        let lessons = `
        js,200元,300次
        html,300.00元,105次
        css,140元,260次
        `;
        let reg = /(\d+)(\.00)?(?=元)/gi;
        let res = lessons.replace(reg, (v, ...args) => {
            console.log(args);
            args[1] = args[1] || '.00';
            return args.splice(0, 2).join('');
        });
        console.table(res);
    </script>
</body>

</html>

 

?<= 断言匹配

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

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

<body>
    <main>
        <a href="https://www.baidu.com">baidu</a>
        <a href="https://www.google.com">google</a>
    </main>

    <script>
        // let str = 'cyy123ccc098';
        // let reg = /(?<=cyy)\d+/gi;
        // console.log(str.match(reg));


        const main = document.querySelector('main');
        const reg = /(?<=href=(["'])).+(?=\1)/gi;
        // console.log(main.innerHTML.match(reg));

        main.innerHTML = main.innerHTML.replace(reg, 'http://www.taobao.com');

    </script>
</body>

</html>

 

使用断言模糊电话号：

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

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

<body>

    <script>
        let users = `
        cyy1电话：12345678911
        cyy2电话：99999678911
        `;

        let reg = /(?<=\d{7})\d{4}/gi;
        users = users.replace(reg, '*'.repeat(4));
        console.log(users);

    </script>
</body>

</html>

 

 

?!断言匹配：

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

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

<body>

    <script>
        // ?= 后面是什么
        // ?! 后面不是什么
        let str = 'cyy2020ccc';

        let reg = /[a-z]+(?!\d)/gi; // 错误
        let reg = /[a-z]+(?!\d)$/gi; // 正确

        console.log(str.match(reg));
    </script>
</body>

</html>

 

断言限制用户名关键词：

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

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

<body>
    <input type="text" name='user'>

    <script>
        //要求注册名中不能包含cyy
        let input = document.querySelector('[name=user]');
        input.addEventListener('keyup', function () {
            // let reg = /^(?!.*cyy.*).*/gi;
            let reg = /^(?!.*cyy.*)[a-z]{5,6}$/gi;
            console.log(this.value.match(reg));
        })
    </script>
</body>

</html>

 

?<!断言匹配：

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

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

<body>


    <script>
        // ?<! 限制前面不是什么
        let str = 'cyy999ccc';
        let reg = /^(?<!\d+)[a-z]+/gi;
        console.log(str.match(reg));

    </script>
</body>

</html>

 

使用断言排除法统一数据：

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

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

<body>
    <main>
        <a href="https://www.baidu.com/1.jpg">1.jpg</a>
        <a href="https://oss.baidu.com/2.jpg">2.jpg</a>
        <a href="https://cdn.baidu.com/3.jpg">3.jpg</a>
        <a href="https://baidu.com/4.jpg">4.jpg</a>
    </main>


    <script>
        // ?<! 限制前面不是什么
        const main = document.querySelector('main');
        //过滤oss
        let reg = /https:\/\/([a-z]+)?(?<!oss)\..+?(?=\/)/gi;
        main.innerHTML = main.innerHTML.replace(reg, (v) => {
            return 'https://oss.baidu.com';
        });

    </script>
</body>

</html>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程