溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JavaScript中正則表達式的使用方法是什么

發(fā)布時間：2021-12-15 11:27:56 來源：億速云 閱讀：152 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要講解了“JavaScript中正則表達式的使用方法是什么”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“JavaScript中正則表達式的使用方法是什么”吧！

一、什么是正則表達式

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

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

1、正則表達式特點

正則表達式的靈活性。

邏輯性和功能性非常強。

可以迅速地用極簡單的方式達到字符串的復(fù)雜控制。

2、正則表達式的使用

1、創(chuàng)建正則表達式

通常有兩種方式可以創(chuàng)建。

1）通過調(diào)用 RegExp 對象的構(gòu)造函數(shù)創(chuàng)建

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

2）通過字面量創(chuàng)建

 var 變量名 = /表達式/;

// 注釋中間放表達式就是正則字面量

2、測試正則表達式

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

regexObj.test(str)

其中：

regexObj —寫的正則表達式

str —要測試的文本

意即檢測str文本是否符合寫的正則表達式規(guī)范。

例如：

給定一個正則表達式var rg = /123/,判斷我們輸入的字符串是否符合規(guī)則。

var str = '123'
var reg1 = new RegExp(/123/);
var reg2 = /abc/;
console.log(reg1.test(str)) ; 
console.log(reg2.test(str)) ;

打印結(jié)果為;

JavaScript中正則表達式的使用方法是什么

二、正則表達式中的特殊字符

1、正則表達式的組成

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

2、邊界符

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

邊界符說明
^表示匹配行首的文本
$表示匹配行尾的文本

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

3、字符類

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

1、[]方括號類

/[abc]/.test('andy')     // true

后面的字符串只要包含abc中任意一個字符，都返回true。

2、[-]方括號內(nèi)部 范圍符-

/^[a-z]$/.test(c')     // true

方括號內(nèi)部加上 - 表示范圍，這里表示 a 到 z 26個英文字母都可以。

3. [^] 方括號內(nèi)部 取反符^

  /[^abc]/.test('andy')     // false

方括號內(nèi)部加上 ^ 表示取反，只要包含方括號內(nèi)的字符，都返回 false 。

注意和邊界符 ^ 區(qū)別，邊界符寫到方括號外面。

4. 字符組合

/[a-z1-9]/.test('andy')     // true

方括號內(nèi)部可以使用字符組合，這里表示包含 a 到 z 的26個英文字母和 1 到 9 的數(shù)字都可以。

4、 量詞符

量詞符用來設(shè)定某個模式出現(xiàn)的次數(shù)。

量詞說明
*重復(fù)零次或者更多次
+重復(fù)一次或者更多次
？重復(fù)0次或一次
{n}重復(fù)n次
{n,}重復(fù)n次或更多次
{n,m}重復(fù)n到m次
var reg = /^a*$/;        // * 相當(dāng)于>=0，可以出現(xiàn)0次或很多次
var reg = /^a+$/;        // + 相當(dāng)于>=1，可以出現(xiàn)1次或很多次
var reg = /^a?$/;        // ? 相當(dāng)于1||0，可以出現(xiàn)0次或1次
var reg = /^a{3}$/;      // {3}就是重復(fù)a字符3次
var reg = /^a{3,}$/;    // {3,}就是重復(fù)a字符 大于等于3次
var reg = /^a{3,16}$/;  // {3,16}就是重復(fù)a字符 大于等于3次 小于等于16次

比如現(xiàn)在做一個用戶名驗證的案例，如果用戶名輸入合法，則提示信息為：用戶名合法，顏色為綠色；如果用戶名輸入不合法，則提示信息為：用戶名不合法，并且顏色為綠色。

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.js"></script>
    <style>
        .success{
            color:green;
        }
        .wrong{
            color:red;
        }
    </style>
</head>
<body>
    <label for="">用戶名：
        <input type="text" class="uname"><span></span>
    </label>
    <script>
       $(function(){
        var reg = /^[a-zA-Z0-9_-]{6,16}$/;
        $('.uname').bind('blur',function(){
            let str = $(this).val();
            if($('input').val === null){
                $('span').removeClass();
            }
            if(reg.test(str)){
                if($('span').hasClass('wrong'))
               $('span').removeClass()
                $('span').html('輸入格式正確');
                $('span').addClass('success')
            }else{
                $('span').html('輸入格式錯誤');
                $('span').addClass('wrong')
            }
        })
       })

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

顯示效果為：

JavaScript中正則表達式的使用方法是什么

5、括號總結(jié)

大括號 量詞符. 里面表示重復(fù)次數(shù)

中括號 字符集合。匹配方括號中的任意字符.

小括號 表示優(yōu)先級

6、預(yù)定義類

預(yù)定義類指的是某些常見模式的簡寫方式。

JavaScript中正則表達式的使用方法是什么

三、String類中的方法

1、match()方法

match()方法：根據(jù)正則匹配出所有符合要求的內(nèi)容匹配成功后將其保存到數(shù)組中，匹配失敗則返回false。

例如：

var str = "It's is the shorthand of it is";
var reg1 = /it/gi;
str.match(reg1);    // 匹配結(jié)果：(2) ["It", "it"]
var reg2 = /^it/gi;	
str.match(reg2);    // 匹配結(jié)果：["It"]
var reg3 = /s/gi;	
str.match(reg3);    // 匹配結(jié)果：(4) ["s", "s", "s", "s"]
var reg4 = /s$/gi;
str.match(reg4);    // 匹配結(jié)果：["s"]

2、search()方法

search()方法：search()方法可以返回指定模式的子串在字符串首次出現(xiàn)的位置，相對于indexOf()方法來說功能更強大。

例如：

var str = '123*abc.456';
console.log(str.search('.*'));      	// 輸出結(jié)果：0
console.log(str.search(/[\.\*]/));   	// 輸出結(jié)果：3

3、split()方法

split()方法：split()方法用于根據(jù)指定的分隔符將一個字符串分割成字符串?dāng)?shù)組，其分割后的字符串?dāng)?shù)組中不包括分隔符。

例如：

按照字符串中的“@”和“.”兩種分隔符進行分割。

var str = 'test@123.com';
var reg = /[@\.]/;
var split_res = str.split(reg);
console.log(split_res);    // 輸出結(jié)果：(3) ["test", "123", "com"]

正則匹配方式分割字符串時，還可以指定字符串分割的次數(shù)。

var str = 'We are a family';
var reg = /\s/;
var split_res = str.split(reg, 2);
console.log(split_res);    // 輸出結(jié)果：(2) ["We", "are"]

4、replace()方法

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

例如：寫一個查找并替換敏感詞的案例（過濾漢字和‘bad'這個單詞）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body >
    <div>
        <p>過濾前的內(nèi)容</p>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <button id = 'btn'>過濾</button>
    </div>
    <div>
        <p>過濾后的內(nèi)容</p>
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </div>
    <script>
        var text = document.querySelectorAll('textarea');
        console.log(text);
        var btn = document.querySelector('button');
        btn.onclick = function() {
            text[1].value = text[0].value.replace(/(bad)|[\u4e00-\u9fa5]/gi, '*');
        }
    </script>
</body>
</html>

運行效果為： 

JavaScript中正則表達式的使用方法是什么

感謝各位的閱讀，以上就是“JavaScript中正則表達式的使用方法是什么”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對JavaScript中正則表達式的使用方法是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手