JavaScript中exec()方法详解

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

JavaScript的exec()方法是在正则表达式对象上调用的方法,它用于在字符串中执行正则表达式搜索,并返回匹配的结果,本文就给大家详细的讲解JavaScript中exec()方法,感兴趣的同学跟着小编一起来看看吧

一、RegExp对象的声明及exec()方法的使用

声明一个RegExp有两种方式：

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

2）var re =/pattern/modifiers;

注释：pattern（模式）：描述了表达式的模式
modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配，具体有 i 、g 和 m 三类,这三类也可以自由组合也可以不添加修饰符。

修饰符	释义
i	代表忽略大小写
g	代表全局匹配
m	执行多行匹配

示例：

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()方法:

直接调用即可。如果匹配到字符串返回一个数组；如果没有匹配到返回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]/;   //匹配两位一个数字和一个忽略大小写的字母
        var res1=re1.exec('aa2edj3djie7788');
        var res2=re1.exec('458949468974484');
    </script>
</body>
</html>

我们断点来看var res1=re1.exec('aa2edj3djie7788');执行结果

我们再断点看var res2=re1.exec('458949468974484');执行结果

综上所知，我们使用exec()方法得到的结果有两个，一个是存有匹配字符串的数组，一个是null

二、RegExp对象和执行exec()得到的结果分析

1）首先RegExp对象

只需要关系此对象的一个属性，lastIndex ，这个属性的值代表了检索字符串开始匹配的起始索引，依旧上代码和断点

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

我们来看断点中的RegExp对象，在调用exec()方法前

我们看调用exec()方法后的断点

注意，这里在调用exec()方法前后，lastIndex值虽然没有改变，但是这个属性至关重要。
1）lastIndex代表了每次匹配要检索的字符串的开始匹配的起始索引位置
2）在修饰符使用了 g 后，此属性是变的，因此对后面理解 g修饰符是非常关键的。

2）执行exec()的到的结果

这里我们只断点查看数组结果，null也没啥好看的好像。

下面看断点截图

来看下数组对象每个属性：
var a=res1[0]; // 匹配到的字符串
var index=res1.index; //匹配到的字符串的第一个字符在被检索字符串String中的位置
var input=res1.input; //被检索的字符串
stringvar length=res1.length; //数组的长度

三、修饰符 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]");   //匹配两位一个数字和一个忽略大小写的字母
        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'); 执行结果

断点查看 var res2=re2.exec('8AJDJDJ'); 执行结果

四、修饰符 g 的使用

修饰符g代表全局匹配，全局匹配就是对把整个要检索的字符串全部匹配一遍。

原理就是当使用了 g 修饰符，每次调用 exec()方法后，如果匹配到了字符串，则 lastIndex属性的值会改变。而没有使用 g 修饰符，每次调用exec()方法后，lastIndex值永远都为0 ，所以每次调用exec()最多只会检索出一个相同的字符。

至于使用了g修饰符，找到匹配的字符串后，lastIndex的值会被重置为匹配内容的下一个字符在需要检索字符串中的位置索引。

下面来上代码和断点吧，一目了然。我们一行行断点来搞清楚 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全局搜索的时候，我们可以使用循环
         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");

断点查看执行一次后RegExp对象 var res1=test1.exec("1a2b3c4d5e");

再执行一次，查看断点 var res2=test1.exec("1a2b3c4d5e");

综上可知，在使用g全局搜索时，可以根据 lastIndex对整个要检索字符串进行匹配。因此，我们可以使用循环来得到要检索字符串中所有匹配的结果。

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

我们来看结果吧，因为我们已经执行了两次，所以 lastIndex此时，已经为4，因此循环检索匹配从要检索字符串的索引4开始。

下面，我们来重点看执行到结果为res[0]= 5e 时的断点

我们来看这时候的RegExp对象

这时候可以看到lastIndex值为10，即下次匹配从索引10开始，我们知道要检索的字符串“1a2b3c4d5e”的长度为10，因此下一次调用结果为null。

我们来看下一步，当结果为null时，断点截图

我们注意到，这时候，RegExp对象的属性 lastIndex的值重置为0。即下一次再调用 exec()方法，会从要检索字符串的 0索引位置开始匹配

通过上述一步步断点，相信你已经明白了全局搜索 g修饰符的使用原理。那么我们再来看，没有设置 g的时候，代码的断点

看这一步，var test2=/\d{2}/; 断点。刚开始 test2的lastIndex值为0

执行一次，var result=test2.exec("22dhdhj33djdj44"); 得到的结果为 22

重点看此时的 test2属性 lastIndex的值，发现lastIndex值还是0

因为当非全局搜索的时候，test2不管调用几次exec()方法，其属性lastIndex值都为0。
所以，非全局搜索，每次调用exec()方法总是得到第一个相同的结果。

五、修饰符 m 的使用

修饰符m执行多行匹配。代表多行模式multiline。

使用m时需要注意：1）当要检索的字符串为单行时，使用 m无意义。很明显啊，只有一行字符串使用啥 m 啊。2）当要检索的字符串有换行符 \n 或 \r\n时，这里要看正则表达式有没有位置符号 ^ 和 $：

①当正则表达式中存在 ^和$符号时，使用了 m ，则:

“^”与字符串开始位置以及“\n”或“\r”之后的位置相匹配，“$”与字符串结束位置以及“\n”或“\r”之前的位置相匹配。

②当正则表达式中存在 ^和$符号时，没有使用了 m ，则:

“^”与字符串的开始位置相匹配，“$”与字符串的结束位置相匹配。

③当正则表达式中不存在 ^和$符号时，使用了 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>

断点查看结果：

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

这是情况①当正则表达式中存在 ^和$符号时，使用了 m ，则:

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

“$”与字符串结束位置以及“\n”或“\r”之前的位置相匹配。

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

这是情况②当正则表达式中存在 ^和$符号时，没有使用了 m ，则:

“^”与字符串的开始位置相匹配，

“$”与字符串的结束位置相匹配。

<!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>

断点查看结果：

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

这是情况③

当正则表达式中不存在 ^和$符号时，使用了 m ，则:

正则表达式正常匹配整个要检索的字符串

2）var res1=re1.exec(str);

这是情况④

当正则表达式中不存在 ^和$符号时，没有使用了 m ，则：

正则表达式正常匹配整个要检索的字符串

综上所知：
使用m的时候，只有当要检索的字符串中有换行符，且正则表达式中有 ^和$位置符号时，m才会起作用；
其他情况下使用和不使用m都当一个正常的字符串匹配检索。

以上就是JavaScript中exec()方法详解的详细内容，更多关于JavaScript exec()方法的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
最近用CodeMirror2作后台的模板编辑器，在IE9、Firefox下面没有问题。到了IE7、IE8下面，textarea里面的代码就显示不出来了。搜索了好多，终于找到原因
2012-03-03
javascript针对cookie的基本操作实例详解
这篇文章主要介绍了javascript针对cookie的基本操作,结合实例形式较为详细的分析了JavaScript操作cookie的基本技巧,并给出了一个JavaScript操作cookie的完整类,具有一定参考借鉴价值,需要的朋友可以参考下
2015-11-11
使两个iframe的高度与内容自适应,且相等
使两个iframe的高度与内容自适应,且相等...
2006-11-11
lazyload.js详解(推荐)
lazyload.js用于长页面图片的延迟加载，视口外的图片会在窗口滚动到它的位置时再进行加载，这是与预加载相反的，这篇文章主要介绍了lazyload.js详解,需要的朋友可以参考下
2022-09-09
js控制radio选中、不可选和改变事件实例代码
这篇文章主要给大家介绍了关于js控制radio选中、不可选和改变事件的相关资料,我们经常会遇到js控制radio选中和切换的问题,需要的朋友可以参考下
2023-07-07
VBS通过WMI监视注册表变动的代码
似乎有人觉得用VBS监视注册表很高级？使用了WMI事件而已，跟《用VBS监视进程创建和删除》一样
2011-10-10
window.open()实现post传递参数
本文主要向大家介绍了如何使用window.open()实现post传递参数的方法，思路是参考的一位网友的，然后根据自己的项目需求做了些调整，这里同样分享给大家，希望对大家能够有所帮助。
2015-03-03
JavaScript 删除数组元素的方法
本文主要介绍了JavaScript 删除数组元素的方法，包括操作方法改变了原数组和操作方法不改变原数组，具有一定的参考价值，感兴趣的可以了解一下
2024-02-02
JavaScript中的canvas 实现一个圆环渐变倒计时效果
这篇文章主要介绍了JavaScript中的canvas 实现一个圆环渐变倒计时效果，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-09-09
JavaScript简单编程实例学习
在本篇文章里小编给大家整理的是关于JavaScript简单编程实例学习内容，有兴趣的朋友们可以参考下。
2020-02-02