JavaScript中exec()方法詳解
一、RegExp對象的聲明及exec()方法的使用
聲明一個(gè)RegExp有兩種方式：
1）var re=new RegExp(pattern,modifiers);
2）var re =/pattern/modifiers;
注釋：pattern（模式）： 描述了表達(dá)式的模式
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)用即可。如果匹配到字符串返回一個(gè)數(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]/; //匹配兩位一個(gè)數(shù)字和一個(gè)忽略大小寫的字母
var res1=re1.exec('aa2edj3djie7788');
var res2=re1.exec('458949468974484');
</script>
</body>
</html>我們斷點(diǎn)來看var res1=re1.exec('aa2edj3djie7788');執(zhí)行結(jié)果
我們再斷點(diǎn)看var res2=re1.exec('458949468974484');執(zhí)行結(jié)果
綜上所知，我們使用exec()方法得到的結(jié)果有兩個(gè)，一個(gè)是存有匹配字符串的數(shù)組，一個(gè)是null
二、RegExp對象和執(zhí)行exec()得到的結(jié)果分析
1）首先RegExp對象
只需要關(guān)系此對象的一個(gè)屬性，lastIndex ，這個(gè)屬性的值代表了 檢索字符串 開始匹配的起始索引，依舊上代碼和斷點(diǎn)
<!DOCTYPE html>
<html>
<head>
<title>exec()方法的使用</title>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
var re1=/\d[a-zA-Z]/; //匹配兩位一個(gè)數(shù)字和一個(gè)忽略大小寫的字母
var res1=re1.exec('aa2edj3djie7788');
</script>
</body>
</html>我們來看斷點(diǎn)中的RegExp對象，在調(diào)用exec()方法前
我們看調(diào)用exec()方法后的斷點(diǎn)
注意，這里在調(diào)用exec()方法前后，lastIndex值雖然沒有改變，但是這個(gè)屬性至關(guān)重要。
1）lastIndex代表了每次匹配要檢索的字符串的開始匹配的起始索引位置
2）在 修飾符使用了 g 后，此屬性是變的，因此對后面理解 g修飾符是非常關(guān)鍵的。
2）執(zhí)行exec()的到的結(jié)果
這里我們只斷點(diǎn)查看數(shù)組結(jié)果，null也沒啥好看的好像。
下面看斷點(diǎn)截圖
來看下數(shù)組對象每個(gè)屬性：
var a=res1[0]; // 匹配到的字符串
var index=res1.index; //匹配到的字符串的第一個(gè)字符 在被檢索字符串String中的位置
var input=res1.input; //被檢索的字符串
stringvar length=res1.length; //數(shù)組的長度
三、修飾符 i 的使用
修飾符 i 代表了匹配時(shí)忽略大小寫，下面上代碼吧。
<!DOCTYPE html>
<html>
<head>
<title>exec()方法的使用</title>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
var re1=new RegExp("\d[a-z]"); //匹配兩位一個(gè)數(shù)字和一個(gè)忽略大小寫的字母
var re2=new RegExp("\d[a-z]","i");
var res1=re1.exec('8AJDJDJ');
var res2=re2.exec('8AJDJDJ');
</script>
</body>
</html>斷點(diǎn)查看 var res1=re1.exec('8AJDJDJ'); 執(zhí)行結(jié)果
斷點(diǎn)查看 var res2=re2.exec('8AJDJDJ'); 執(zhí)行結(jié)果
四、修飾符 g 的使用
修飾符g代表全局匹配，全局匹配就是對把整個(gè)要檢索的字符串全部 匹配一遍。
原理就是 當(dāng)使用了 g 修飾符，每次調(diào)用 exec()方法后，如果匹配到了字符串，則 lastIndex屬性的值會改變。而沒有使用 g 修飾符，每次調(diào)用exec()方法后，lastIndex值永遠(yuǎn)都為0 ，所以每次調(diào)用exec()最多只會檢索出一個(gè)相同的字符。
至于使用了g修飾符，找到匹配的字符串后，lastIndex的值會被重置為匹配內(nèi)容的下一個(gè)字符在 需要檢索字符串 中的位置索引。
下面來上代碼和斷點(diǎn)吧，一目了然。我們一行行斷點(diǎn)來搞清楚 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全局搜索的時(shí)候，我們可以使用循環(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>斷點(diǎn)查看 var test1=new RegExp("\d\w","g");
斷點(diǎn)查看 執(zhí)行一次后RegExp對象 var res1=test1.exec("1a2b3c4d5e");
再執(zhí)行一次，查看斷點(diǎn) var res2=test1.exec("1a2b3c4d5e");
綜上可知，在使用g全局搜索時(shí)，可以根據(jù) lastIndex對整個(gè) 要檢索字符串進(jìn)行匹配。因此，我們可以使用循環(huán)來得到 要檢索字符串中所有匹配的結(jié)果。
do{
var res=test1.exec("1a2b3c4d5e");
if(res!=null){
console.log(res[0]);
}
}while(res!=null);我們來看結(jié)果吧，因?yàn)槲覀円呀?jīng)執(zhí)行了兩次，所以 lastIndex此時(shí)，已經(jīng)為4，因此循環(huán)檢索匹配從 要檢索字符串的索引4開始。
下面，我們來重點(diǎn)看執(zhí)行到 結(jié)果為res[0]= 5e 時(shí)的斷點(diǎn)
我們來看這時(shí)候的RegExp對象
這時(shí)候可以看到lastIndex值為10，即下次匹配從索引10開始，我們知道要檢索的字符串“1a2b3c4d5e”的長度為10，因此下一次調(diào)用結(jié)果為null。
我們來看下一步，當(dāng)結(jié)果為null時(shí)，斷點(diǎn)截圖
我們注意到，這時(shí)候，RegExp對象的屬性 lastIndex的值重置為0。即下一次再調(diào)用 exec()方法，會從 要檢索字符串的 0索引位置 開始匹配
通過上述一步步斷點(diǎn)，相信你已經(jīng)明白了全局搜索 g修飾符的使用原理。那么我們再來看，沒有設(shè)置 g的時(shí)候，代碼的斷點(diǎn)
看這一步，var test2=/\d{2}/; 斷點(diǎn)。剛開始 test2的lastIndex值為0
執(zhí)行一次，var result=test2.exec("22dhdhj33djdj44"); 得到的結(jié)果為 22
重點(diǎn)看此時(shí)的 test2屬性 lastIndex的值，發(fā)現(xiàn)lastIndex值還是0
因?yàn)楫?dāng)非全局搜索的時(shí)候，test2不管調(diào)用幾次exec()方法 ，其屬性lastIndex值都為0。
所以，非全局搜索，每次調(diào)用exec()方法總是得到第一個(gè)相同的結(jié)果。
五、修飾符 m 的使用
修飾符m執(zhí)行多行匹配。代表多行模式multiline。
使用m時(shí)需要注意：1）當(dāng)要檢索的字符串為單行時(shí)，使用 m無意義。很明顯啊，只有一行字符串使用啥 m 啊。2）當(dāng)要檢索的字符串有換行符 \n 或 \r\n時(shí)，這里要看正則表達(dá)式有沒有位置符號 ^ 和 $：
①當(dāng)正則表達(dá)式中存在 ^和$符號時(shí)，使用了 m ，則:
“^”與字符串開始位置以及“\n”或“\r”之后的位置相匹配，“$”與字符串結(jié)束位置以及“\n”或“\r”之前的位置相匹配。
②當(dāng)正則表達(dá)式中存在 ^和$符號時(shí)，沒有使用了 m ，則:
“^”與字符串的開始位置相匹配，“$”與字符串的結(jié)束位置相匹配。
③當(dāng)正則表達(dá)式中不存在 ^和$符號時(shí)，使用了 m ，則:
正則表達(dá)式正常匹配字符串
④當(dāng)正則表達(dá)式中不存在 ^和$符號時(shí)，沒有使用了 m ，則:
正則表達(dá)式正常匹配字符串
下面來具體看第二條注意中各種可能。
<!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>斷點(diǎn)查看結(jié)果：
1）var res=re.exec("adfdd1727\r\naddjdsljs\r\nadd\nshshsh");
這是情況①當(dāng)正則表達(dá)式中存在 ^和$符號時(shí)，使用了 m ，則:
“^”與字符串開始位置以及“\n”或“\r”之后的位置相匹配，
“$”與字符串結(jié)束位置以及“\n”或“\r”之前的位置相匹配。
2）var res1=re1.exec("adfdd1727\r\naddjdsljs\r\nadd\nshshsh");
這是情況②當(dāng)正則表達(dá)式中存在 ^和$符號時(shí)，沒有使用了 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>斷點(diǎn)查看結(jié)果：
1）var res=re.exec(str);
這是情況③
當(dāng)正則表達(dá)式中不存在 ^和$符號時(shí)，使用了 m ，則:
正則表達(dá)式正常匹配整個(gè)要檢索的字符串
2）var res1=re1.exec(str);
這是情況④
當(dāng)正則表達(dá)式中不存在 ^和$符號時(shí)，沒有使用了 m ，則：
正則表達(dá)式正常匹配整個(gè)要檢索的字符串
綜上所知：
使用m的時(shí)候，只有當(dāng) 要檢索的字符串中有換行符，且正則表達(dá)式中有 ^和$位置符號時(shí)，m才會起作用；
其他情況下使用和不使用m都當(dāng)一個(gè)正常的字符串 匹配檢索。
以上就是JavaScript中exec()方法詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript exec()方法的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了javascript中鍵盤事件用法,實(shí)例分析了鍵盤事件包含的方法及具體使用技巧,需要的朋友可以參考下2015-01-01
Javascript柯里化實(shí)現(xiàn)原理及作用解析
這篇文章主要介紹了Javascript柯里化實(shí)現(xiàn)原理及作用解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
JS將光標(biāo)聚焦在文本最后的實(shí)現(xiàn)代碼
這篇文章主要介紹了JS將光標(biāo)聚焦在文本最后的方法,需要的朋友可以參考下2014-03-03
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)可愛的氣泡特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
javascript實(shí)現(xiàn)五星評價(jià)代碼（源碼下載）
大家在淘寶購物之后，都會對賣家的服務(wù)進(jìn)行評論，那么五星評價(jià)代碼是怎么實(shí)現(xiàn)的呢？下面小編給大家介紹基于Javascript實(shí)現(xiàn)五星評價(jià)代碼，有需要的朋友可以參考下2015-08-08
基于javascript實(shí)現(xiàn)動態(tài)顯示當(dāng)前系統(tǒng)時(shí)間
這篇文章主要介紹了基于javascript實(shí)現(xiàn)動態(tài)顯示當(dāng)前系統(tǒng)時(shí)間，以一個(gè)完整實(shí)例形式較為詳細(xì)的分析了js動態(tài)顯示當(dāng)前系統(tǒng)時(shí)間的實(shí)現(xiàn)技巧，需要的朋友可以參考下2016-01-01
這篇文章主要介紹了微信小程序緩存時(shí)效性，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
有時(shí)因某種特殊需要，會獲取span里面的值，下面有個(gè)不錯的示例，大家可以參考下2014-05-05
Javascript Echarts空氣質(zhì)量地圖效果詳解
這篇文章主要介紹了詳解Javascript利用echarts畫空氣質(zhì)量地圖，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-10-10
js將當(dāng)前時(shí)間格式化為 年-月-日 時(shí):分:秒的實(shí)現(xiàn)代碼
這篇文章主要介紹了js將當(dāng)前時(shí)間格式化為 年-月-日 時(shí):分:秒主要是使用js的Date()對象，將系統(tǒng)當(dāng)前時(shí)間格式化為年-月-日 時(shí):分:秒，需要的朋友可以參考下2018-01-01