JavaScript高級教程（24）——正則表達式

1.正則表達式概述

1.1什麼是正則表達式

正則表達式（Regular Expression）是用於匹配字符串中字符組合的模式。在JavaScript中，正則表達式也是對象。

正則表達式通常被用來檢索、替換那些符合某個模式（規則）的文本，例如驗證表單：用戶名錶單隻能輸入英文字母、數字、或者下劃線，暱稱輸入框中可以輸入中文（匹配）。此外，正則表達式還常用於過濾掉頁面內容中的一些敏感詞（替換），或從字符串中獲取我們想要的特定部分（提取）等。

1.2正則表達式的特點

1.靈活性、邏輯性和功能性非常的強。
2.可以迅速地用極簡單的方式達到字符串的複雜控制。
3.對於剛接觸的人來說，比較晦澀難懂。
4.實際開發，一般都是直接複製寫好的正則表達式，但是要求會使用正則表達式。

2.正則表達式在JavaScript中的使用

2.1創建正則表達式

在JavaScript中，可以通過兩種方式創建一個正則表達式。

1.通過調用RegExp對象的構造函數創建

var 變量名 = new RegExp(/表達式/)；

2.使用字面量創建

var 變量名 = /表達式/；

2.2測試正則表達式test

test()正則對象方法，用於檢測字符串是否符合該規則，該對象會返回true或false，其參數是測試字符串。

regexobj.test(str)

1.regexobj是寫的正則表達式

2.str我們要測試的文本

3.就是檢測str文本是否符合我們寫的正則表達式規範

<!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>
        //正則表達式在js中的使用
        //1.利用RegExp對象來創建正則表達式
        var regexp = new RegExp(/123/);
        console.log(regexp);

        //2.利用字面量創建正則表達式
        var rg = /123/;
        //3.test用來檢測字符串是否符合正則表達式要求的規範
        console.log(rg.test(123));
        console.log(rg.test('abc'));
    </script>
</body>

</html>

3.正則表達式中的特殊字符

3.1正則表達式的組成

一個正則表達式可以由簡單的字符構成，比如/abc/，也可以是簡單和特殊字符的組合，比如/ab*c/。其中，特殊字符也被稱爲元字符，在正則表達式中是具有特殊意義的專用字符，如：^、$、+等。

3.2邊界符

正則表達式中的邊界符（位置符）用來提示字符所處的位置，主要有兩個字符。

如果^和$在一起，表示必須是精確匹配

3.3字符類

字符類表示有一系列字符可供選擇，只要匹配其中一個就可以了。所有可供選擇的字符都放在方括號內。

1.^[]$括號內內容選一

2.[-]方括號內容範圍符

3.字符組合

方括號內部可以使用字符組合，這裏表示包含a到z的26個英文字母和0到9的數字都可以。

4.[^]方括號內部取反符

<!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 rg = /abc/;  只要包含abc就可以
        //字符類  []表示有一系列字符可供選擇  只要匹配其中一個就可以了
        var rg = /[abc]/; //只要包含有a  或者包含有b  或者包含有c  都返回true
        console.log(rg.test('andy'));
        console.log(rg.test('baby'));
        console.log(rg.test('color'));
        console.log(rg.test('aatcyr'));
        console.log(rg.test('red'));
        console.log('-------------------');

        var rge = /^[abc]$/; //三選一  只要是a  或者  b  或者  c  這三個字母才返回true
        console.log(rge.test('a'));
        console.log(rge.test('b'));
        console.log(rge.test('c'));
        console.log(rge.test('red'));
        console.log('-------------------');
        var rg1 = /^[a-z]$/; //26個英文字母任何一個字母返回true   - 表示的是a到z的範圍
        console.log(rg1.test('a'));
        console.log(rg1.test('z'));
        console.log(rg1.test(1));
        console.log(rg1.test('A'));
        console.log('-------------------');
        //字符組合
        var reg = /^[a-zA-Z0-9_-]$/; //26個英文字母（大寫和小寫）任何一個字母返回true   - 表示的是a到z的範圍
        console.log(reg.test('a'));
        console.log(reg.test('B'));
        console.log(reg.test(8));
        console.log(reg.test('-'));
        console.log(reg.test('_'));
        console.log(reg.test('!'));
        console.log('-----------------');
        //如果中括號裏面有^  表示取反的意思  不能和我們的邊界符^混淆
        var reg1 = /^[^a-zA-Z0-9_-]$/;
        console.log(reg1.test('a'));
        console.log(reg1.test('B'));
        console.log(reg1.test(8));
        console.log(reg1.test('-'));
        console.log(reg1.test('_'));
        console.log(reg1.test('!'));
    </script>
</body>

</html>

3.4量詞符

量詞符用來設定某個模式出現的次數

<!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>
        //量詞符：用來設定某個模式出現的次數
        //簡單理解：就是讓下面a這個字符重複多少次
        // var reg = /^a$/;

        //*  相當於  >= 0  可以出現0次或者很多次
        // var reg = /^a*$/;
        // console.log(reg.test(''));
        // console.log(reg.test('a'));
        // console.log(reg.test('aaaaa'));

        //+   相當於  >=  可以出現1次或者很多次
        // var reg = /^a+$/;
        // console.log(reg.test('')); //false
        // console.log(reg.test('a')); //true
        // console.log(reg.test('aaaaa')); //true


        //？  相當於  1 ||  0
        // var reg = /^a?$/;
        // console.log(reg.test('')); //true
        // console.log(reg.test('a')); //true
        // console.log(reg.test('aaaaa')); //false

        //{3 }就是重複3次
        // var reg = /^a{3}$/;
        // console.log(reg.test('')); //false
        // console.log(reg.test('a')); //false
        // console.log(reg.test('aaaaa')); //false
        // console.log(reg.test('aaa')); //true
        //{3,}大於等於3
        // var reg = /^a{3,}$/;
        // console.log(reg.test('')); //false
        // console.log(reg.test('a')); //false
        // console.log(reg.test('aaaaa')); //true
        // console.log(reg.test('aaa')); //true

        //{3,16}大於等於3  並且小於等於16
        var reg = /^a{3,6}$/;
        console.log(reg.test('')); //false
        console.log(reg.test('a')); //false
        console.log(reg.test('aaaaaaa')); //false
        console.log(reg.test('aaa')); //true
    </script>
</body>

</html>

<!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>
        span {
            color: #aaa;
            font-size: 14px;
        }
        
        .right {
            color: green
        }
        
        .wrong {
            color: red;
        }
    </style>
</head>


<body>
    <input type="text" class="uname"><span>請輸入用戶名</span>

    <script>
        //量詞是設定某個模式出現的次數
        //{6,16}  中間不要有空格
        var reg = /^[a-zA-Z0-9_-]{6,16}$/; //這個模式用戶只能輸入英文字母  數字  下劃線  短橫線
        //但是有邊界符  這就限定了只能多選1
        // console.log(reg.test('a'));
        // console.log(reg.test('8'));
        // console.log(reg.test('18'));
        // console.log(reg.test('aa'));
        // console.log('-------------------------');
        // console.log(reg.test('andy-red'));
        // console.log(reg.test('andy_red'));
        // console.log(reg.test('andy007'));
        // console.log(reg.test('andy!007'));
        var uname = document.querySelector('.uname');
        var span = document.querySelector('span');
        uname.onblur = function() {
            if (reg.test(this.value)) {
                console.log('正確的');
                span.className = 'right';
                span.innerHTML = '用戶名格式正確';

            } else {
                console.log('錯誤的');
                span.className = 'wrong';
                span.innerHTML = '用戶名格式不正確';
            }
        }
    </script>

</body>

</html>

3.5括號總結

1.大括號：量詞符，裏面表示重複的次數
2.中括號：字符集合，匹配方括號中的任意字符
3.小括號：表示優先級

<!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.大括號  ：量詞符，裏面表示重複的次數
        // 2.中括號：字符集合，匹配方括號中的任意字符
        // 3.小括號：表示優先級
        // var reg = /^[abc]$/;
        //a可以  b可以  c可以  a || b || c
        var reg = /^abc{3}$/; //它只是讓c重複三次  abccc
        console.log(reg.test('abc')); //false
        console.log(reg.test('abcabcabc')); //false
        console.log(reg.test('abccc')); //true

        var reg = /^(abc){3}$/; //它是讓abc重複三次
        console.log(reg.test('abc')); //false
        console.log(reg.test('abcabcabc')); //true
        console.log(reg.test('abccc')); //false
    </script>
</body>

</html>

3.6預定義類

預定義類指的是某些常見模式的簡寫方式

4.正則表達式中的替換

4.1replace()方法可以實現替換字符串操作，用來替換的參數可以是一個字符串或是一個正則表達式。

1.第一個參數：被替換的字符串或者正則表達式
2.第二個參數：替換爲的字符串
3.返回值是一個替換完畢的新字符串

4.2正則表達式參數

switch(也稱爲修飾符)按照什麼樣的模式來匹配，有三種值：

g：全局匹配
i：忽略大小寫
gi：全局匹配 + 忽略大小寫

<!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>
    <textarea name="" id="message"></textarea>
    <button>提交</button>
    <div></div>
    <script>
        //替換  replace

        // var str = 'andy 和 red';
        // var newStr = str.replace('andy', 'baby');
        // var newStr = str.replace(/andy/, 'baby');
        // console.log(newStr);
        var text = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.onclick = function() {
            div.innerHTML = text.value.replace(/激情|你/g, '**');
        }
    </script>
</body>

</html>

JavaScript高級教程（24）——正則表達式

記一次 .NET某工業設計軟件崩潰分析

創建 Vue3 項目

TS + Webpack 整合 Jest

分享5款.NET開源免費的Redis客戶端組件庫

安卓手機如何登錄抖音境外版

golang開發 gorilla websocket的使用

面試官：如果不允許線程池丟棄任務，應該選擇哪個拒絕策略？

嵌入式汽車電子學習路線

Mac卸載 Node npm，升級 Node

uni.showModel內容換行

js學習筆記（6）——作用域、對象、構造函數

JavaScript高級教程（23）——高階函數、函數的閉包、遞歸

js學習筆記（7）——js內置對象（Math、Date、Array、字符串）

js學習筆記——（13）offset系列、client系列

js學習筆記（2）——JavaScript運算符以及優先級

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結