首页 > 编程语言 >JavaScript中exec()方法详解

JavaScript中exec()方法详解

时间:2023-09-01 19:00:45浏览次数:50  
标签:re1 匹配 exec JavaScript 字符串 详解 var 断点

一、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');执行结果

JavaScript中exec()方法详解_前端开发

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

JavaScript中exec()方法详解_修饰符_02

综上所知,我们使用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()方法前

JavaScript中exec()方法详解_前端开发_03

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

JavaScript中exec()方法详解_修饰符_04

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

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

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

下面看断点截图

JavaScript中exec()方法详解_html_05

来看下数组对象每个属性:
var a=res1[0]; // 匹配到的字符串
var index=res1.index; //匹配到的字符串的第一个字符 在被检索字符串String中的位置
var input=res1.input; //被检索的字符串 string
var 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'); 执行结果

JavaScript中exec()方法详解_javascript_06

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

JavaScript中exec()方法详解_字符串_07

四、修饰符 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");

JavaScript中exec()方法详解_html_08

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

JavaScript中exec()方法详解_html_09

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

JavaScript中exec()方法详解_html_10

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

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

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

JavaScript中exec()方法详解_html_11

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

JavaScript中exec()方法详解_修饰符_12

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

JavaScript中exec()方法详解_html_13

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

JavaScript中exec()方法详解_前端开发_14

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

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

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

JavaScript中exec()方法详解_javascript_15

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

JavaScript中exec()方法详解_html_16

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

JavaScript中exec()方法详解_html_17

因为当非全局搜索的时候,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");

JavaScript中exec()方法详解_html_18

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

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

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

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

JavaScript中exec()方法详解_前端开发_19

这是情况②
当正则表达式中存在 ^和$符号时,没有使用了 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);

JavaScript中exec()方法详解_前端开发_20

这是情况③

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

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

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

JavaScript中exec()方法详解_html_21

这是情况④

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

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

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

学习更多JavaScript知识请关注CRMEB开源项目

标签:re1,匹配,exec,JavaScript,字符串,详解,var,断点
From: https://blog.51cto.com/u_15723831/7325541

相关文章

  • Epoll详解及源码分析
    1.什么是epollepoll是当前在Linux下开发大规模并发网络程序的热门人选,epoll在Linux2.6内核中正式引入,和select相似,都是I/O多路复用(IOmultiplexing)技术,按照man手册的说法:是为处理大批量句柄而作了改进的poll。Linux下有以下几个经典的服务器模型:①Apache模型(ProcessPerCon......
  • 视频云存储/安防监控/AI视频智能分析网关V3:工服检测功能详解
    在一些工地、后厨、化工、电力等特定的场景中,工服的穿戴是必不可少的。这不仅是安全制度的要求,更能降低工作风险、提高工作效率。TSINGSEE青犀AI边缘计算网关硬件——智能分析网关可以通过实时监测和识别工人的工装穿戴情况,确保他们符合安全要求。只需在施工场地等监控区域内对......
  • 视频云存储/安防监控/视频AI智能分析:消防器材缺失检测功能详解
    在我们的日常生活中,消防器材是必不可少的,无论是在学校、园区还是工厂里,都需要摆放消防器材,做好防范措施,降低安全隐患。但有时也需防备消防器材被人为挪动甚至破坏,在危急时刻无法发挥作用。TSINGSEE青犀AI边缘计算网关硬件——智能分析网关消防器材缺失检测算法就能很好地预防这种情......
  • LatexEasy | JavaScript集成公式编辑器
    在线示例https://latexeasy.com/en/demo/sdk使用方式基础使用方式<iframeid="liveEditor"frameborder="0"style="width:100%;height:400px;border:0;outline:none;"src="https://latexeasy.com/editor"></if......
  • 软件测试|MySQL唯一约束详解
    简介MySQL唯一约束(UniqueKey)是指所有记录中字段的值不能重复出现。MySQL中的唯一约束是一种用于确保表中某列或多列的取值唯一的数据库约束。唯一约束的作用是防止表中出现重复的值,确保数据的完整性和一致性。在本文中,我们将详细介绍MySQL中唯一约束的定义、用法以及其在数据库设......
  • 软件测试|MySQL 非空约束详解
    简介MySQL中的非空约束(NOTNULLConstraint)是一种用于确保表中某列不允许为空值的数据库约束。非空约束的作用是保证特定列的数据始终包含有效值,防止在插入或更新操作时出现空值,从而维护数据的完整性和一致性。在本文中,我们将详细介绍MySQL中非空约束的定义、用法以及在数据库设计......
  • Spring源码分析(十三)ApplicationContext详解(下)
    前面两篇文章,已经对ApplicationContext的大部分内容做了介绍,包括国际化,Spring中的运行环境,Spring中的资源,Spring中的事件监听机制,还剩唯一一个BeanFactory相关的内容没有介绍,这篇文章就来介绍BeanFactory,这篇文章介绍,关于ApplicationContext相关的内容总算可以告一段落了。本文对应......
  • linux内核等待队列详解
    https://www.cnblogs.com/xinghuo123/p/13347964.html等待队列用于使得进程等待某一特定事件的发生,无需频繁的轮询,进程在等待周期中睡眠,当时间发生后由内核自动唤醒。1数据结构1.1等待队列头等待队列结构如下,因为每个等待队列都可以再中断时被修改,因此,在操作等待队列之前必......
  • 如何使用javascript制作一个网页端3D贪吃蛇游戏(附源码)
    3D网页版贪吃蛇游戏!下面来具体讲一下如何实现。该游戏使用Hightopo的SDK制作,总共100多行代码,没有WebGL基础的同学们也可很快掌握。场景初始化首先,我们对页面进行初始化,包括初始化3D场景,设置地面网格,以及开启事件监听等。主要代码及注释如下:w=40;//网格间距m=20;//......
  • 免苹果开发者账号申请iOS上架及证书打包ipa测试(2022最新详解)
    虽然xcode现在可以免证书进行测试了,但众多跨平台开发者,如果还没注册苹果开发者账号。想安装到自己非越狱手机测试是无能为力了。不过新技术来了,只需要普通免费的苹果账号无需付费成为开发者就可以申请ios证书打包ipa安装到自己手机测试,强大吧!这个神器就是Appuploader,iosapp测试及......