學(xué)習(xí)筆記整理-正則表達(dá)式-01-認(rèn)識(shí)正則

這篇具有很好參考價(jià)值的文章主要介紹了學(xué)習(xí)筆記整理-正則表達(dá)式-01-認(rèn)識(shí)正則。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

一、基本認(rèn)識(shí)

1. 什么是正則表達(dá)式

正則表達(dá)式(regular expression)描述了字符串"構(gòu)成模式"，經(jīng)常被用于檢查字符串是否符合預(yù)定的格式要求。
用一個(gè)例子快速演示正則表達(dá)式基本使用方法：檢查某個(gè)字符串是否是6位數(shù)字
```
   // 要檢查的字符串
  var str = '456789';
  // 正則表達(dá)式規(guī)則
  var regexp = /^\d{6}$/; 
  // 檢查
  if (regexp.test(str)) {
    alert('符合規(guī)則'); 
  } else {
    alert('不符合規(guī)則'); 
  }
```
- /^\d{6}$/就是正則表達(dá)式，它描述了字符串必須是"6位數(shù)字"的構(gòu)成規(guī)則。
- 正則表達(dá)式可以調(diào)用test()方法，檢查某字符串是否符合正則表達(dá)式規(guī)定的規(guī)則。
正則表達(dá)式"按位"描述規(guī)則
- 正則表達(dá)式"按位"描述規(guī)則，是指它是一位一位的描述字符串的構(gòu)成形式。
- 比如檢查字符串是不是這樣的：以字母m開(kāi)頭，然后是3個(gè)數(shù)字，最后以字母n結(jié)尾。
```
    // ^表示開(kāi)頭，$表示結(jié)尾，\d 表示數(shù)字 \d\d\d也可以寫作\d{3}
    /^m\d\d\dn$/
```

二、基本使用

1. 正則表達(dá)式的創(chuàng)建

使用/內(nèi)容/的語(yǔ)法形式，可以快速創(chuàng)建正則表達(dá)式。
也可以使用new RegExp('內(nèi)容')的形式，創(chuàng)建正則表達(dá)式。

使用typeof運(yùn)算符檢查正則表達(dá)式的類型，結(jié)果是object。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 創(chuàng)建正則表達(dá)式方法1
        var regexp1 = /^\d{6}$/;
        // 創(chuàng)建正則表達(dá)式方法2
        var regexp2 = new RegExp('^\\d{6}$');

        var str = '555666';

        console.log(regexp1.test(str));     // true
        console.log(regexp2.test(str));     // true

        console.log(typeof regexp1);        // object
        console.log(typeof regexp2);        // object
    </script>
</body>
</html>

2. 元字符

"元字符"是指一位指定類型的字符

元字符	功能
`\d`	匹配一個(gè)數(shù)字
`\D`	匹配一個(gè)非數(shù)字字符
`\w`	匹配一個(gè)單字字符(字母、數(shù)字或者下劃線)
`\W`	匹配一個(gè)非單字字符
`\s`	匹配一個(gè)空白字符，包括空格、制表符和換行符
`.`	任意字符

開(kāi)頭和結(jié)尾

元字符功能

^ 匹配開(kāi)頭

$ 匹配結(jié)尾
元字符注意事項(xiàng)
- 如果使用new RegExp()寫法，反斜杠需要多寫一個(gè)。
- 比如/^\d$/和new RegExp('^\\d$')是相同的意思
元字符使用舉例
- 某快遞公司運(yùn)單號(hào)形式是這樣的:123-4567-890，請(qǐng)使用正則表達(dá)式檢查某字符串是否符合此格式
- 某產(chǎn)品的驗(yàn)證秘鑰形式是這樣的:□□□-□□□□-□□□，其中□表示字母數(shù)字或者下劃線，請(qǐng)使用正則表達(dá)式檢查某字符串是否符合此格式
字符的轉(zhuǎn)義
- 在特殊字符之前的反斜杠\表示下一個(gè)字符不是特殊字符，應(yīng)該按照字面理解。
  /^.$/：檢查字符串是不是任意字符
  /^\.$/：檢查字符串是不是一個(gè)點(diǎn)
  /^\\$/：檢查字符串是不是一個(gè)反斜杠
- 不管一個(gè)符號(hào)有沒(méi)有特殊意義，都可以在其之前加上一個(gè)\以確保它表達(dá)的是這個(gè)符號(hào)本身。
- 舉例：某產(chǎn)品批號(hào)形式為：123.45^67#89，請(qǐng)使用正則表達(dá)式檢查某字符串是否符合此格式

元字符	功能
`^`	匹配開(kāi)頭
`$`	匹配結(jié)尾

代碼演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 題目1：某快遞公司運(yùn)單號(hào)形式是這樣的：123-4567-890，請(qǐng)使用正則表達(dá)式檢查某字符串是否符合此格式

        // 正則表達(dá)式
        var regexp1 = /^\d\d\d-\d\d\d\d-\d\d\d$/;
        // 待測(cè)試的字符串
        var str1 = '444-5555-000';
        console.log(regexp1.test(str1));

        // 題目2：某產(chǎn)品的驗(yàn)證秘鑰形式是這樣的：□□□-□□□□-□□□，其中□表示字母數(shù)字或者下劃線，請(qǐng)使用正則表達(dá)式檢查某字符串是否符合此格式

        // 正則表達(dá)式
        var regexp2 = /^\w\w\w-\w\w\w\w-\w\w\w$/;
        // 待測(cè)試的字符串
        var str2 = 'abc-__ab-123';
        console.log(regexp2.test(str2));

        // 題目3：某產(chǎn)品批號(hào)形式為：123.45^67#89，請(qǐng)使用正則表達(dá)式檢查某字符串是否符合此格式
        var regexp3 = /^\d\d\d\.\d\d\^\d\d\#\d\d$/;
        // 待測(cè)試的字符串
        var str3 = '666.66^66#66';
        console.log(regexp3.test(str3));

    </script>
</body>
</html>

3. 方括號(hào)表示法

使用方括號(hào)，比如[xyz]，可以創(chuàng)建一個(gè)字符集合，表示匹配方括號(hào)中的任意字符。
比如某學(xué)校的學(xué)號(hào)規(guī)定：第1位是一個(gè)字母，b表示本科生，y表示研究生，后面是7位數(shù)字，用正則表示為：
```
  /^[by]\d{7}$/
```
可以使用短橫-來(lái)指定一個(gè)字符范圍，^表示否定

元字符等價(jià)的方括號(hào)表示法

\d [0-9]

\D [^0-9]

\w [A-Za-z0-9]

\W [^A-Za-z0-9]

元字符	等價(jià)的方括號(hào)表示法
`\d`	[0-9]
`\D`	[^0-9]
`\w`	[A-Za-z0-9]
`\W`	[^A-Za-z0-9]

方括號(hào)表示法小題目

題目1：請(qǐng)驗(yàn)證某字符串是否是5位字母，大小寫均可
題目2：請(qǐng)驗(yàn)證某字符串是否是5位，且僅有小寫字母、點(diǎn)構(gòu)成

題目3：請(qǐng)驗(yàn)證某字符串是否是4位小寫字母，且最后一位不能是m字母

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 某學(xué)校的學(xué)號(hào)規(guī)定：第1位是一個(gè)字母，b表示本科生，y表示研究生，后面是7位數(shù)字，用正則表示為：
        // 學(xué)號(hào)字符串
        var str1 = 'm4444555';

        // 用正則表達(dá)式進(jìn)行檢查
        console.log(/^[by]\d{7}$/.test(str1));

        // *******************************************
        // 題目1：請(qǐng)驗(yàn)證某字符串是否是5位字母，大小寫均可
        var str2 = 'abcde';
        var str3 = 'abcd5';
        console.log(/^[a-zA-Z]{5}$/.test(str2));
        console.log(/^[a-zA-Z]{5}$/.test(str3));

        // 題目2：請(qǐng)驗(yàn)證某字符串是否是5位，且僅由小寫字母、點(diǎn)構(gòu)成
        var str4 = 'mnp..';
        var str5 = 'mnp.#';
        console.log(/^[a-z\.]{5}$/.test(str4));
        console.log(/^[a-z\.]{5}$/.test(str5));

        // 題目3：請(qǐng)驗(yàn)證某字符串是否是4位小寫字母，且最后一位不能是m字母
        var str6 = 'abcd';
        var str7 = 'abcm';
        var str8 = 'ab1c';
        console.log(/^[a-z]{3}[a-ln-z]$/.test(str6));
        console.log(/^[a-z]{3}[a-ln-z]$/.test(str7));
        console.log(/^[a-z]{3}[a-ln-z]$/.test(str8));
    </script>
</body>

</html>

4. 量詞

量詞	意義
`*`	匹配前一個(gè)表達(dá)式0次或多次。等價(jià)于{0,}
`+`	匹配前面一個(gè)表達(dá)式1次或者多次。等價(jià)于{1,}
`?`	匹配前面一個(gè)表達(dá)式0次或者1次。等價(jià)于{0,1}
`{n}`	n是一個(gè)正整數(shù)，匹配了前面一個(gè)字符剛好出現(xiàn)了n次
`{n,}`	n是一個(gè)正整數(shù)，匹配前一個(gè)字符至少出現(xiàn)了n次
`{n, m}`	n和m都是整數(shù)。匹配前面的字符至少n次，最多m次

量詞小題目

題目1：請(qǐng)驗(yàn)證字符串是否符合手機(jī)號(hào)碼的規(guī)則：11位數(shù)字，并且肯定以1開(kāi)頭。
題目2：請(qǐng)驗(yàn)證某字符串是否是這樣的：以字母開(kāi)頭，中間是任意位數(shù)字(最少1位)構(gòu)成，并以字母結(jié)尾。

題目3：請(qǐng)驗(yàn)證某字符串是否符合網(wǎng)址規(guī)則：以www.開(kāi)頭，中間是任意位的字符(字母數(shù)字下劃線)，最后以.com結(jié)尾，也可以以.com.cn結(jié)尾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 題目1：請(qǐng)驗(yàn)證字符串是否符合手機(jī)號(hào)碼的規(guī)則：11位數(shù)字，并且肯定以1開(kāi)頭
        var str1 = '13812345678';
        var str2 = '138123456789';
        var str3 = '38123456789';
        var regexp1 = /^1\d{10}$/;
        console.log(regexp1.test(str1));
        console.log(regexp1.test(str2));
        console.log(regexp1.test(str3));
        
        // 題目2：請(qǐng)驗(yàn)證某字符串是否是這樣的：以字母開(kāi)頭，中間是任意位數(shù)字（最少1位）構(gòu)成，并以字母結(jié)尾
        var str4 = 'a123123123b';
        var str5 = 'abcd';
        var str6 = 'a1b';
        var regexp2 = /^[a-zA-Z]\d+[a-zA-Z]$/;
        console.log(regexp2.test(str4));
        console.log(regexp2.test(str5));
        console.log(regexp2.test(str6));
        
        // 題目3：請(qǐng)驗(yàn)證某字符串是否符合網(wǎng)址規(guī)則：以www.開(kāi)頭，中間是任意位的字符（字母數(shù)字下劃線，最少一位），最后以.com結(jié)尾，也可以以.com.cn結(jié)尾
        var str7 = 'www.imooc.com';
        var str8 = 'www.sina.com.cn';
        var str9 = 'www.news.cn';
        var regexp3 = /^www\.\w+\.com(\.cn)?$/;
        console.log(regexp3.test(str7));
        console.log(regexp3.test(str8));
        console.log(regexp3.test(str9));
    </script>
</body>
</html>

5. 修飾符

修飾符也叫作標(biāo)志(flags)，用于使用正則表達(dá)式實(shí)現(xiàn)高級(jí)搜索

修飾符意義

i 不區(qū)分大小寫搜索

g 全局搜索
修飾符的使用
```
  var re = /m/gi;
  var re = new RegExp('m', 'gi');
```
- 在正則表達(dá)式的第二個(gè)/后面寫修飾符，可以多個(gè)連寫。
- new RegExp()形式的正則表達(dá)式，以字符串形式寫在第二個(gè)參數(shù)

修飾符	意義
`i`	不區(qū)分大小寫搜索
`g`	全局搜索

三、相關(guān)方法

1. 正則表達(dá)式可以"打點(diǎn)"調(diào)用哪些方法呢?

方法	簡(jiǎn)介
`test()`	測(cè)試某字符串是否匹配正則表達(dá)式，返回布爾值
`exec()`	根據(jù)正則表達(dá)式，在字符串中進(jìn)行查找，返回結(jié)果數(shù)組或者null

test()方法
- 正則表達(dá)式的test()方法用來(lái)測(cè)試某字符串是否匹配此正則表達(dá)式，它返回true或false
```
  /^[a-z]{3}[a-ln-z]$/.test('abcd')
```

exec()方法

exec()方法功能是：在一個(gè)指定字符串中執(zhí)行一個(gè)搜索匹配查找，返回一個(gè)結(jié)果數(shù)組或null
```
   var str = 'abc123def456ghi789';
   var regexp = /\d+/;
   var result1 = regexp.exec(str);
```

exec()方法的逐條遍歷

exec()方法最有趣的是，有"g"修飾符的正則表達(dá)式將自動(dòng)成為"有狀態(tài)"的，
這意味著可以對(duì)單個(gè)字符串中的多次匹配結(jié)果進(jìn)行逐條的遍歷。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var str = 'abc123def456ghi789';
        var regexp = /\d+/g;    // +表示貪婪的，盡可能多的匹配
        var result1 = regexp.exec(str);
        var result2 = regexp.exec(str);
        var result3 = regexp.exec(str);
        var result4 = regexp.exec(str);
        console.log(result1);
        console.log(result2);
        console.log(result3);
        console.log(result4);

        // 使用循環(huán)語(yǔ)句來(lái)循環(huán)執(zhí)行exec，尋找所有的匹配結(jié)果
        var result;
        while (result = regexp.exec(str)) {
            console.log(result);
        }
    </script>
</body>

</html>

字符串的相關(guān)方法

方法	簡(jiǎn)介
`search()`	在字符串中根據(jù)正則表達(dá)式進(jìn)行查找匹配，返回首次匹配到的位置索引，測(cè)試不到則返回-1
`match()`	在字符串中根據(jù)正則表達(dá)式進(jìn)行查找匹配，返回一個(gè)數(shù)組，找不到則返回null
`replace()`	使用替換字符串替換掉匹配到的子字符串，可以使用正則表達(dá)式
`split()`	分隔字符串為數(shù)組，可以使用正則表達(dá)式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var str = 'abc123def4567ghi89';
     
        // search()方法，很像indexOf()，返回查找到的第一個(gè)下標(biāo)，如果找不到就是-1
        var result1 = str.search(/\d+/g);
        var result2 = str.search(/m/g);
        console.log(result1);       // 3
        console.log(result2);       // -1

        // match()方法，返回查找到的數(shù)組，找不到就是null
        var result3 = str.match(/\d+/g);
        console.log(result3);       // ["123", "4567", "89"]

        // replace()方法，進(jìn)行替換
        var result4 = str.replace(/[a-z]+/g, '*');      // 注意+表示貪婪的，盡可能多的連續(xù)匹配小寫字母
        console.log(result4);       // *123*4567*89

        // split()方法，進(jìn)行字符串拆為數(shù)組
        var result5 = str.split(/\d+/g);
        console.log(result5);       // ["abc", "def", "ghi", ""]
    </script>
</body>
</html>

四、應(yīng)用

用正則表達(dá)式進(jìn)行表單驗(yàn)證

用正則表達(dá)式進(jìn)行表單驗(yàn)證是正則表達(dá)式最重要的實(shí)際應(yīng)用

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .warning {
            color: red;
            display: none;
        }
    </style>
</head>

<body>
    <div>
        <p>
            請(qǐng)輸入中文姓名：
            <input type="text" id="nameField">
            <span class="warning" id="nameWarning">輸入的姓名不合法</span>
        </p>
        <p>
            請(qǐng)輸入手機(jī)號(hào)碼：
            <input type="text" id="telField">
            <span class="warning" id="telWarning">輸入的手機(jī)號(hào)碼不合法</span>
        </p>
        <p>
            請(qǐng)輸入Email：
            <input type="text" id="emailField">
            <span class="warning" id="emailWarning">輸入的Email不合法</span>
        </p>
    </div>
    <script>
        var nameField = document.getElementById('nameField');
        var telField = document.getElementById('telField');
        var emailField = document.getElementById('emailField');
        var nameWarning = document.getElementById('nameWarning');
        var telWarning = document.getElementById('telWarning');
        var emailWarning = document.getElementById('emailWarning');

        // 當(dāng)文本框失去焦點(diǎn)，就是光標(biāo)不在文本框中了
        nameField.onblur = function () {
            // 得到姓名
            var name = nameField.value;
            if (/^[\u4E00-\u9FA5]{2,4}$/.test(name)) {
                // 如果通過(guò)校驗(yàn)
                nameWarning.style.display = 'none';
            } else {
                // 如果沒(méi)有通過(guò)校驗(yàn)
                nameWarning.style.display = 'inline';
            }
        };

        telField.onblur = function () {
            // 得到電話
            var tel = telField.value;
            if (/^1\d{10}$/.test(tel)) {
                // 如果通過(guò)校驗(yàn)
                telWarning.style.display = 'none';
            } else {
                // 如果沒(méi)有通過(guò)校驗(yàn)
                telWarning.style.display = 'inline';
            }
        };

        emailField.onblur = function () {
            // 得到email
            var email = emailField.value;
            // 合法的email都是abc_def123@abc.net

            if (/^\w{2,}\@\w{2,}\.[a-z]{2,4}(\.[a-z]{2,4})?$/.test(email)) {
                // 如果通過(guò)校驗(yàn)
                emailWarning.style.display = 'none';
            } else {
                // 如果沒(méi)有通過(guò)校驗(yàn)
                emailWarning.style.display = 'inline';
            }
        };
    </script>
</body>

</html>

重點(diǎn)內(nèi)容文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-653515.html
- 元字符、量詞、方括號(hào)表示法
- 正則表達(dá)式和字符串的常用方法

到了這里，關(guān)于學(xué)習(xí)筆記整理-正則表達(dá)式-01-認(rèn)識(shí)正則的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

Toy模板網(wǎng)

學(xué)習(xí)筆記整理-正則表達(dá)式-01-認(rèn)識(shí)正則

一、基本認(rèn)識(shí)

1. 什么是正則表達(dá)式

二、基本使用

1. 正則表達(dá)式的創(chuàng)建

2. 元字符

3. 方括號(hào)表示法

4. 量詞

5. 修飾符

三、相關(guān)方法

1. 正則表達(dá)式可以"打點(diǎn)"調(diào)用哪些方法呢?

四、應(yīng)用

覺(jué)得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

二維碼2

學(xué)習(xí)筆記整理-正則表達(dá)式-01-認(rèn)識(shí)正則

一、基本認(rèn)識(shí)

1. 什么是正則表達(dá)式

二、基本使用

1. 正則表達(dá)式的創(chuàng)建

2. 元字符

3. 方括號(hào)表示法

4. 量詞

5. 修飾符

三、相關(guān)方法

1. 正則表達(dá)式可以"打點(diǎn)"調(diào)用哪些方法呢?

四、應(yīng)用

相關(guān)文章

覺(jué)得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

二維碼2

一、基本認(rèn)識(shí)

二、基本使用

三、相關(guān)方法

四、應(yīng)用