腳本之家服務器常用軟件

快捷導航

JavaScript中exec()方法詳解

更新時間：2023年09月01日 08:34:49 作者：big男孩

JavaScript的exec()方法是在正則表達式對象上調(diào)用的方法,它用于在字符串中執(zhí)行正則表達式搜索,并返回匹配的結(jié)果,本文就給大家詳細的講解JavaScript中exec()方法,感興趣的同學跟著小編一起來看看吧

一、RegExp對象的聲明及exec()方法的使用

聲明一個RegExp有兩種方式：

1）var re=new RegExp(pattern,modifiers);

2）var re =/pattern/modifiers;

注釋：pattern（模式）：描述了表達式的模式
modifiers(修飾符) 用于指定全局匹配、區(qū)分大小寫的匹配和多行匹配，具體有 i 、g 和 m 三類,這三類也可以自由組合也可以不添加修飾符。

修飾符	釋義
i	代表忽略大小寫
g	代表全局匹配
m	執(zhí)行多行匹配

示例：

1）var re=new RegExp(pattern,modifiers);

var re1=new RegExp("\w{2}");   
var re2=new RegExp("\w{2}","i");

2）var re =/pattern/modifiers;

var re3=/\w{2}/;
var re4=/\w{2}/ig;

使用RegExp對象的exec()方法:

直接調(diào)用即可。如果匹配到字符串返回一個數(shù)組；如果沒有匹配到返回null

1） var re1=new RegExp("\w{2}");

 var res1=re1.exec("要檢索的字符串");

2）var re3=/\w{2}/;

var res2=re3.exec("要檢索的字符串");

示例：

<!DOCTYPE html>
<html>
<head>
    <title>exec()方法的使用</title>
    <meta charset="utf-8">
</head>
<body>
    <script type="text/javascript">
        var re1=/\d[a-zA-Z]/;   //匹配兩位一個數(shù)字和一個忽略大小寫的字母
        var res1=re1.exec('aa2edj3djie7788');
        var res2=re1.exec('458949468974484');
    </script>
</body>
</html>

我們斷點來看var res1=re1.exec('aa2edj3djie7788');執(zhí)行結(jié)果

我們再斷點看var res2=re1.exec('458949468974484');執(zhí)行結(jié)果

綜上所知，我們使用exec()方法得到的結(jié)果有兩個，一個是存有匹配字符串的數(shù)組，一個是null

二、RegExp對象和執(zhí)行exec()得到的結(jié)果分析

1）首先RegExp對象

只需要關(guān)系此對象的一個屬性，lastIndex ，這個屬性的值代表了檢索字符串開始匹配的起始索引，依舊上代碼和斷點

<!DOCTYPE html>
<html>
<head>
    <title>exec()方法的使用</title>
    <meta charset="utf-8">
</head>
<body>
    <script type="text/javascript">
        var re1=/\d[a-zA-Z]/;   //匹配兩位一個數(shù)字和一個忽略大小寫的字母
        var res1=re1.exec('aa2edj3djie7788');
    </script>
</body>
</html>

我們來看斷點中的RegExp對象，在調(diào)用exec()方法前

我們看調(diào)用exec()方法后的斷點

注意，這里在調(diào)用exec()方法前后，lastIndex值雖然沒有改變，但是這個屬性至關(guān)重要。
1）lastIndex代表了每次匹配要檢索的字符串的開始匹配的起始索引位置
2）在修飾符使用了 g 后，此屬性是變的，因此對后面理解 g修飾符是非常關(guān)鍵的。

2）執(zhí)行exec()的到的結(jié)果

這里我們只斷點查看數(shù)組結(jié)果，null也沒啥好看的好像。

下面看斷點截圖

來看下數(shù)組對象每個屬性：
var a=res1[0]; // 匹配到的字符串
var index=res1.index; //匹配到的字符串的第一個字符在被檢索字符串String中的位置
var input=res1.input; //被檢索的字符串
stringvar length=res1.length; //數(shù)組的長度

三、修飾符 i 的使用

修飾符 i 代表了匹配時忽略大小寫，下面上代碼吧。

<!DOCTYPE html>
<html>
<head>
    <title>exec()方法的使用</title>
    <meta charset="utf-8">
</head>
<body>
    <script type="text/javascript">
        var re1=new RegExp("\d[a-z]");   //匹配兩位一個數(shù)字和一個忽略大小寫的字母
        var re2=new RegExp("\d[a-z]","i");
        var res1=re1.exec('8AJDJDJ');
        var res2=re2.exec('8AJDJDJ');
    </script>
</body>
</html>

斷點查看 var res1=re1.exec('8AJDJDJ'); 執(zhí)行結(jié)果

斷點查看 var res2=re2.exec('8AJDJDJ'); 執(zhí)行結(jié)果

四、修飾符 g 的使用

修飾符g代表全局匹配，全局匹配就是對把整個要檢索的字符串全部匹配一遍。

原理就是當使用了 g 修飾符，每次調(diào)用 exec()方法后，如果匹配到了字符串，則 lastIndex屬性的值會改變。而沒有使用 g 修飾符，每次調(diào)用exec()方法后，lastIndex值永遠都為0 ，所以每次調(diào)用exec()最多只會檢索出一個相同的字符。

至于使用了g修飾符，找到匹配的字符串后，lastIndex的值會被重置為匹配內(nèi)容的下一個字符在需要檢索字符串中的位置索引。

下面來上代碼和斷點吧，一目了然。我們一行行斷點來搞清楚 g 的原理。

<!DOCTYPE html>
<html>
<head>
    <title>exec()方法的使用</title>
    <meta charset="utf-8">
</head>
<body>
    <script type="text/javascript">
         // 使用 g 修飾符  全局搜索
         var test1=new RegExp("\d\w","g");
         var res1=test1.exec("1a2b3c4d5e");
         var res2=test1.exec("1a2b3c4d5e");
         //綜上可知， 使用g全局搜索的時候，我們可以使用循環(huán)
         do{
            var res=test1.exec("1a2b3c4d5e");
            if(res!=null){
                console.log(res[0]);
            }
         }while(res!=null);
        //沒有使用 g
        var test2=/\d{2}/;
        var result=test2.exec("22dhdhj33djdj44");
        var result1=test2.exec("22dhdhj33djdj44");
    </script>
</body>
</html>

斷點查看 var test1=new RegExp("\d\w","g");

斷點查看執(zhí)行一次后RegExp對象 var res1=test1.exec("1a2b3c4d5e");

再執(zhí)行一次，查看斷點 var res2=test1.exec("1a2b3c4d5e");

綜上可知，在使用g全局搜索時，可以根據(jù) lastIndex對整個要檢索字符串進行匹配。因此，我們可以使用循環(huán)來得到要檢索字符串中所有匹配的結(jié)果。

 do{
      var res=test1.exec("1a2b3c4d5e");
      if(res!=null){
         console.log(res[0]);
      }
}while(res!=null);

我們來看結(jié)果吧，因為我們已經(jīng)執(zhí)行了兩次，所以 lastIndex此時，已經(jīng)為4，因此循環(huán)檢索匹配從要檢索字符串的索引4開始。

下面，我們來重點看執(zhí)行到結(jié)果為res[0]= 5e 時的斷點

我們來看這時候的RegExp對象

這時候可以看到lastIndex值為10，即下次匹配從索引10開始，我們知道要檢索的字符串“1a2b3c4d5e”的長度為10，因此下一次調(diào)用結(jié)果為null。

我們來看下一步，當結(jié)果為null時，斷點截圖

我們注意到，這時候，RegExp對象的屬性 lastIndex的值重置為0。即下一次再調(diào)用 exec()方法，會從要檢索字符串的 0索引位置開始匹配

通過上述一步步斷點，相信你已經(jīng)明白了全局搜索 g修飾符的使用原理。那么我們再來看，沒有設(shè)置 g的時候，代碼的斷點

看這一步，var test2=/\d{2}/; 斷點。剛開始 test2的lastIndex值為0

執(zhí)行一次，var result=test2.exec("22dhdhj33djdj44"); 得到的結(jié)果為 22

重點看此時的 test2屬性 lastIndex的值，發(fā)現(xiàn)lastIndex值還是0

因為當非全局搜索的時候，test2不管調(diào)用幾次exec()方法，其屬性lastIndex值都為0。
所以，非全局搜索，每次調(diào)用exec()方法總是得到第一個相同的結(jié)果。

五、修飾符 m 的使用

修飾符m執(zhí)行多行匹配。代表多行模式multiline。

使用m時需要注意：1）當要檢索的字符串為單行時，使用 m無意義。很明顯啊，只有一行字符串使用啥 m 啊。2）當要檢索的字符串有換行符 \n 或 \r\n時，這里要看正則表達式有沒有位置符號 ^ 和 $：

①當正則表達式中存在 ^和$符號時，使用了 m ，則:

“^”與字符串開始位置以及“\n”或“\r”之后的位置相匹配，“$”與字符串結(jié)束位置以及“\n”或“\r”之前的位置相匹配。

②當正則表達式中存在 ^和$符號時，沒有使用了 m ，則:

“^”與字符串的開始位置相匹配，“$”與字符串的結(jié)束位置相匹配。

③當正則表達式中不存在 ^和$符號時，使用了 m ，則:

正則表達式正常匹配字符串

④當正則表達式中不存在 ^和$符號時，沒有使用了 m ，則:

正則表達式正常匹配字符串

下面來具體看第二條注意中各種可能。

<!DOCTYPE html>
<html>
<head>
    <title>exec()方法的使用</title>
    <meta charset="utf-8">
</head>
<body>
    <script type="text/javascript">
        var re=/^ad{2}$/m;
        var res=re.exec("adfdd1727\r\naddjdsljs\r\nadd\nshshsh");
        var re1=/^ad{2}$/;
        var res1=re1.exec("adfdd1727\r\naddjdsljs\r\nadd\nshshsh");
    </script>
</body>
</html>

斷點查看結(jié)果：

1）var res=re.exec("adfdd1727\r\naddjdsljs\r\nadd\nshshsh");

這是情況①當正則表達式中存在 ^和$符號時，使用了 m ，則:

“^”與字符串開始位置以及“\n”或“\r”之后的位置相匹配，

“$”與字符串結(jié)束位置以及“\n”或“\r”之前的位置相匹配。

2）var res1=re1.exec("adfdd1727\r\naddjdsljs\r\nadd\nshshsh");

這是情況②當正則表達式中存在 ^和$符號時，沒有使用了 m ，則:

“^”與字符串的開始位置相匹配，

“$”與字符串的結(jié)束位置相匹配。

<!DOCTYPE html>
<html>
<head>
    <title>exec()方法的使用</title>
    <meta charset="utf-8">
</head>
<body>
    <script type="text/javascript">
        var str="fdd1727\r\naddjdsljs\r\nadd\nshshsh";
        var re=/ad{2}/m;
        var res=re.exec(str);
        var re1=/ad{2}/;
        var res1=re1.exec(str);
    </script>
</body>
</html>

斷點查看結(jié)果：

1）var res=re.exec(str);