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

本篇內(nèi)容主要講解“JS正則表達式的使用方法是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“JS正則表達式的使用方法是什么”吧!

測試字符串是否合規(guī)

這種特性常被用來檢測前端輸入的字段是否符合要求，常見的場景是注冊時輸入賬號、密碼、郵箱等的測試。

var  regexp_1 = /a/;
var  regexp_2 = new Regexp("a");

上面，我給了兩種寫法，這兩種寫法，常用的是第一種，第一種與第二種完全等效，都是創(chuàng)建一個正則表達式(以后看見代碼里字符串有倆斜線包裹，別再懷疑了，就是正則！)。

沒錯，這就是正則表達式的創(chuàng)建方法，是不是灰常簡單，沒有那么高大上吧。上面創(chuàng)建的正則表達式，表達的含義是匹配字符‘a(chǎn)’，且沒有特殊的匹配規(guī)則。

別看上面只有這么簡單的一個表達式，其實它已經(jīng)可以被我們?nèi)ナ褂昧?/strong>，我們看下面這個例子：

<script>
   function demo() {
        var regexp_1 = /a/;
        var str = 'abc'
        alert(regexp_1.test(str))
    }
   demo()
</script>

這上面的就是一個小例子，當然了大家不用管里面的test函數(shù)，因為我們還沒講到，不過大家先記住：

test函數(shù)是正則表達式最基礎(chǔ)的一個函數(shù)，作用是對傳入的字符串進行固定格式、內(nèi)容的匹配。(后面部分會再點到這個函數(shù))

這里我們了解一下我們寫的正則表達式是可以被使用的，因為上面的代碼就涉及了一個簡單的正則表達式的使用。

常見的正則表達式屬性

三種匹配規(guī)則

首先介紹一下正則表達式的三種匹配規(guī)則：

它們的語法是這樣的：

var  regexp_1 = /a/i;
var  regexp_2 = /a/g;
var  regexp_3 = /a/m;

var  regexp_4 = new Regexp("a","i"); 
var  regexp_5 = new Regexp("a","g"); 
var  regexp_6 = new Regexp("a","m"); 

var  regexp_7 = new Regexp("a","igm"); 
var  regexp_8 = /a/igm;

上面展示了兩種正則表達式定義方法下的匹配規(guī)則的語法：

對于第一種正則表達式，我們直接在斜線后加上匹配規(guī)則對應的符號即可；

對于第二種正則表達式，我們在括號里傳入第二個參數(shù)即可，參數(shù)仍然是對應的符號；

補充：其實不傳入?yún)?shù)、斜線后面不寫任何東西，代表了默認情況，也就是普通的正則匹配。

最后要說明的是，可以有多種規(guī)則同時執(zhí)行，例如可以同時忽略大小寫、全局匹配(需要幾個就加幾個參數(shù)符號)。

我們拿忽略大小寫做一個小demo：

<script>
    function demo() {
        var regexp_1 = /a/;
        var regexp_2 = /a/i;
        var str = 'Abc'
        alert(regexp_1.test(str))
        alert(regexp_2.test(str))
    }
    demo()
</script>

其中，第一個彈窗是False，第二個是True，大家也可以點這里試驗一下：【點我揭曉】

五種常見屬性

接下來，我們講解一下五種常見的正則表達式的屬性：

啥，你問我啥叫正則表達式的五種屬性？就是 /a/ 的五種屬性，這句話就是這么理解的，也就是這個表達式會有五種屬性，它們分別是：

除了lastIndex，其他四個大家應該都能從字面理解，關(guān)于lastIndex，我會在下一個部分單獨介紹它。

規(guī)則g的使用詳解

最后，由于規(guī)則g：全局匹配，不容易理解，我們單獨拿出來講一講，而且講g的同時，順便把上面提到的lastIndex也一起講了：

我們先看這樣一個字符串：

str = 's_s_s_s_s_s_s_s'

假如目標是匹配s，那么使用普通的正則表達式，例如：

regexp = '/s/'

我們確實匹配了，但是只匹配了第一個s，換句話說沒有把所有的s匹配到，那么如果我們想要把整個句子里的s都匹配一下，這時 g 就發(fā)揮作用了：

我們現(xiàn)在有需求：匹配每一個s，并依次輸出s的索引，此時我們的第一步是定義一個g模式的正則表達式：

var regexp = '/x/g'

那么索引要怎么辦呢？哎這時候就用到了lastIndex，還記得嗎，它代表了下一次正則表達式匹配的起始索引：

<script>
    function demo() {
        var regexp = /s/g
        var str = 's_s_s_s_s_s_s_s'
        regexp.test(str)
        alert(regexp.lastIndex)
        regexp.test(str)
        alert(regexp.lastIndex)
        regexp.test(str)
        alert(regexp.lastIndex)
        regexp.test(str)
        alert(regexp.lastIndex)
        regexp.test(str)
        alert(regexp.lastIndex)
        }
    demo()
</script>

此時，我們就實現(xiàn)了索引的獲取(注意，這里彈出的并不是索引，是索引加一，減去一就是真正的索引)

常見的正則表達式方法舉例介紹

test方法

首先當然是我們最常用的test()方法了，它有以下功能：

test() 方法是正則表達式最常用一個方法，用于檢測一個字符串是否匹配某個模式.

test ()方法檢查字符串是否與給出的正則表達式模式相匹配，如果是則返回 true，否則就返回 false，這一點在剛才上面的小案例里，大家都有體會。

同時搭配g模式，test方法也可以進行全文的檢查，上面的demo也有提到，這里不過多贅述。它的標準語法格式是這樣的：

var regexp = /xxx/
var str = 'xxx'
var boolean_value = regexp.test(regexp)

正則子表達式匹配

在講exec()方法之前，我們插播一個知識點：子表達式匹配。

什么意思呢？我們觀察一下之前寫的正則表達式，都是一整個式子進行匹配，那么有沒有可以在一個式子里有一些子式子的寫法呢？大家可能到這兒沒有太理解子表達式的意思，那我舉個例子：

現(xiàn)在有這樣一個式子：

str = 'st_s_s_s_s_s_s_s'

我想要先匹配 st_ 這個字符串，那么正則表達式大家都會寫：

var regexp = /st_/

那如果我接下來想要，先匹配一下st_，匹配到之后再匹配一下里面的 t 和 _ ，也就是我想要一次把st_  、t 和 _ 都匹配出來，要怎么辦呢？這樣寫就可以了：

var regexp = /s(t)(_)/

于是我們知道了，括號的內(nèi)容代表子表達式，而且在第一次匹配時，它會默認把所有的括號去掉，做一個整體匹配，例如上面的例子，第一波匹配時，表達式相當于是： /st_/ 。

只有整體匹配成功，后面的子字符串匹配才會被執(zhí)行匹配，否則如果整體沒有匹配到，即使子字符串能匹配到內(nèi)容，也都會被返回空值。(這句話先不用理解，下面的exec()方法會再講)

exec方法

exec()方法，比普通的test()方法更加復雜，同時能做的事情也更復雜：

exec() 方法用于檢索字符串中的正則表達式的匹配。

exec()方法返回的是一個字符串的數(shù)組：

當整句匹配失敗時，會返回一個null的空數(shù)組；

否則，有：數(shù)組的第0個元素存儲的是整句匹配到的字符串，第1個元素存放的是第一個引用型分組(子表達式)匹配的字符串，第2個元素存放的是第二個引用型分組(子表達式)匹配的字符串，依次類推。

看到這里，我要開始填坑了：剛才提到了如果整句匹配失敗，那么即使子字符串能夠成功匹配，也會被返回空值，是什么意思呢？我們舉一個例子，看下面的代碼：

<script>
    function demo() {
        var regexp = /s(t_)(_)/
        var str = 'st_s_s_s_s_s_s_s'
        var list = regexp.exec(str)
        document.write(list[0])
        document.write('<br>')
        document.write(list[1])
        document.write('<br>')
        document.write(list[2])
    }
    demo()
</script>

這段代碼大家現(xiàn)在肯定能看懂，那么有獎競猜：上面代碼執(zhí)行之后，頁面上會被寫什么內(nèi)容？

我們解析一下：

首先，由于包含子字符串，我們第一次先整句匹配，把括號取消，那么正則表達式變成：

regexp = /st__/(注意，這里是有兩個下劃線的)

于是真相很明顯了：st__不存在，所以整句匹配失敗了，于是即便子字符串s_和_能夠被匹配到，一樣不會有結(jié)果，到這里我算是把這塊給大家講清楚了？

那么大家應該對exec()方法有一定了解了，那我最后舉一個成功實現(xiàn)多匹配的例子：

<script>
    function demo() {
        var regexp = /s(t)(_)/
        var str = 'st_s_s_s_s_s_s_s'
        var list = regexp.exec(str)
        document.write(list[0])
        document.write('<br>')
        document.write(list[1])
        document.write('<br>')
        document.write(list[2])
    }
    demo()
</script>

這里有人就很"貪心了"，可能會問list[3]是啥呀？

list[3]是undefined，因為exec()方法只會執(zhí)行一次匹配，因此它在三個表達式(總式、兩個子表達式)匹配之后就會停止，因此一共只有三個值。

字符串的常見函數(shù)

最后是字符串的常見函數(shù)，注意，各位別弄混了，這是字符串的常見函數(shù)，調(diào)用函數(shù)的對象是字符串，不是正則表達式，但是傳參可以是正則表達式：

var str = 'xxx'

// 1. search(): 檢索字符串中與指定的子字符串或正則表達式相匹配的子字符串。
// 返回找到的第一個字符的位置，如果未找到返回-1
// 該方法將忽略"g"標志和正則對象的lastIndex屬性（即總是從開頭找起）
var index = str.search(Regexp/String);

// 2. match(): 在字符串內(nèi)查找一個或多個與正則表達式匹配的字符串，返回一個對象
// 若沒開啟"g"標志，將只查找第一個匹配的字符串，返回一個對象
// 該對象包含下標0、index、input，其中下標0等價于index，input是String的引用
// 開啟"g"，返回一個數(shù)組，數(shù)組的length是匹配的字符串個數(shù)，每個元素是每個匹配的起始字符位置

var list = str.match(Regexp/String)

// 3.replace() : 用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串

str.replace(yourRegexp/String,new_String)

正則表達式的常見匹配語法匯總

這部分，我用一張圖給大家展示一下常見的匹配語法，大家可以記住圖上的一些語法，但不必都記住，需要的時候點開看就行：

<!DOCTYPE html>
<html>

<head>
    <title>簡單注冊校驗</title>
    <meta charset='utf-8' />
    <style>
    </style>
    <script>
        function check() {
            var number = document.getElementById("number").value;

            if (number == "") {
                alert("手機號不能為空哦");
                return false;
            }
            if (/^[0-9][1-9]{10}$/.test(number) == false) {
                alert("手機號的格式不對");
                return false;
            }
            var pwd = document.getElementById("pwd").value;
            if (pwd == "") {
                alert("密碼不能為空");
                return false;
            }
            if (pwd.length < 6) {
                alert("密碼的長度太短，應大于6");
                return false;
            }
            if (pwd.length > 12) {
                alert("密碼的長度太長，應該小于12");
                return false;
            }
            if (/[A-Z]/.test(pwd) == false) {
                alert("密碼至少要包含一個大寫字母");
                return false;
            }
            var pwd2 = document.getElementById("pwd2").value;
            if (pwd != pwd2) {
                alert("兩次輸入的密碼不一樣，請重新輸入");
                return false;
            }
            return true;
        }
    </script>
</head>

<body>
    <h3 style="text-align: center;">注冊賬戶</h3>
    <form method="post" name="myform" onsubmit="check()">
        <table align="center">
            <tr>
                <td>請?zhí)顚懽允謾C號:</td>
                <td><input id="number" name="number" type="text" /></td>
            </tr>
            <tr>
                <td>請?zhí)顚懽悦艽a：</td>
                <td><input id="pwd" name="password" type="password"></td>
            </tr>
            <tr>
                <td>請再次輸入密碼：</td>
                <td><input id="pwd2" name="password" type="password"></td>
            </tr>
        </table>
        <input type="submit" name="btn" value="注冊" style="display: block;margin: 0 auto;margin-top: 50px;">
    </form>
</body>

</html>

到此，相信大家對“JS正則表達式的使用方法是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學習！