吃通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教程