JS前端开发之exec()和match()的对比使用

 更新时间:2022年09月29日 11:24:32   作者:三掌柜666  
match()方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配,下面这篇文章主要给大家介绍了关于JS前端开发之exec()和match()的对比使用的相关资料,需要的朋友可以参考下

前言

在前端开发过程中,关于正则表达式的相关使用想必开发者并不陌生,而且也算是一个比较常用的知识点,尤其是在邮箱、手机号判断校验的时候是必备知识点,但是一般情况下遇到这种校验场景就是去找现有的正则表达式模板直接使用,因为正则表达式在JS中使用的场景比较固定,使用频率不高,一般不会去深究正则表达式的实现原理,二班的情况(精通正则表达式的大佬)除外。那么本篇博文就来分享一下在JS中关于正则表达式的使用相关知识点:exec()和match(),方便查阅使用。

exec()方法

1、定义和用法

exec()方法主要用来检索字符串中的正则表达式的匹配。

注意:如果字符串中有匹配的值则返回该匹配值,否则返回null。

2、语法

RegExpObject.exec(string)

3、参数描述

参数

描述

string

必需的参数。要匹配的字符串

4、使用示例

这里的示例以在字符串中全局搜索 "World" 和 "JS" ,具体代码如下所示:

var str="Hello World!";
//查找"World"
var patt=/World/g;
var result=patt.exec(str);
console.log("result====>",result); //输出结果:World
 
//查找 "JS"
patt=/JS/g;
result=patt.exec(str);
console.log("result====>",result); //输出结果:null

match()方法

1、定义和用法

match() 方法主要是在字符串内检索指定的值,或者找到一个或多个正则表达式的匹配。

注意:match() 方法将检索字符串 String Object,以便找到一个或多个与 regexp 匹配的文本内容,该方法的行为在很大程度上依赖于 regexp 是否具有标志 g。如果 regexp 没有标志 g,那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本, match() 将返回 null。否则,它将返回一个数组,其中存放了与它找到的匹配文本有关的信息内容。

2、语法

      string.match(regexp)

3、参数描述

参数

描述

regexp

必需的参数。规定要匹配的模式的 RegExp 对象。如果该参数不是 RegExp 对象,则需要首先把它传递给 RegExp 构造函数,将其转换为 RegExp 对象。

4、返回值

类型

描述

Array

存放匹配结果的数组。该数组的内容依赖于 regexp 是否具有全局标志 g。 如果没找到匹配结果就返回 null 。

5、使用示例

①这里的示例以在字符串中全局查找 "good" ,并且不区分大小写,具体代码如下所示:

var str="Good good study, day day up!";
var result=str.match(/good/gi);
console.log("result====>",result); //输出结果:Good,good

②拓展示例

把11位手机号以3、4、4个数分割为三份,具体代码如下所示:

var phone="13344445555"; //手机号为13344445555
var result = phone.match(/^(\d{3})(\d{4})(\d{4})$/);
console.log("result====>",result); //输出结果:133,4444,5555

延伸:exec()和match ()最直观的比较

1、exec()和match ()最直观的比较,具体如下所示:

- | -

—|—

Q | q

2、exec()和match ()的本质区别

若正则表达式无子表达式,且定义为非全局匹配时,exec()和match ()执行的结果是一样,都返回第一个匹配的字符串内容;

若正则表达式无子表达式,且定义为全局匹配时,exec()和match ()执行做多处匹配内容,只有match ()返回的是多个元素数组;

若正则表达式有子表达式,且定义为非全局匹配时,exec()和match ()执行的结果是一样的;

若正则表达式有子表达式,且定义为全局匹配时,exec()和match ()执行的结果不一样,其中match ()将忽略子表达式,只查找全匹配正则表达式并返回所有的内容;

最后,exec()与全局是否定义无太大关系,但match ()则是与全局相关联的,当定义为非全局的时候,exec()和match ()二者执行的结果是一样的。

3、调用方式不同

exec()是正则表达式对象的函数,参数为字符串;

match ()是字符串的函数,参数为正则表达式对象。

4、全局匹配不同

在做全局匹配时,exec()仅匹配单次匹配上的内容,而match ()会返回所有匹配上的内容的数组;

在做全局匹配且进行多次匹配时,exec()会从上次匹配结束的下一位开始匹配,返回本次匹配上的内容,直至无可以匹配的内容,最后返回null;

也就是说,在非全局的正则匹配下,exec()和match ()的返回结果是一致的,但在全局匹配的情况下,match ()返回结果集数组,exec()返回每一项匹配结果的详细信息,但如果需要所有的返回结果,则需要循环调用该方法。

5、对参数 g 的解释不同

在有g的时候,exec()每次执行会呈现出递进的形式,否则每次执行的结果都是一样的;有捕获组的时候,总会返回当前匹配项的捕获组。

在有g的时候,match ()执行全局检索,会返回所有匹配项,没有g的时候match ()只会返回第一个匹配项;有捕获组的情况下,match ()只有在没有g的情况下,才会返回第一个匹配项的捕获组。

最后

通过上面介绍的JS中exec和match的对比使用总结,是不是彻底掌握了相关知识点以及使用原理?这个知识点很重要,只要完全掌握其原理之后不管以后在前端开发过程中有关exec和match的使用,都能轻松应对,这里不再过多赘述重要性。

到此这篇关于JS前端开发之exec()和match()对比使用的文章就介绍到这了,更多相关JS exec()和match()的使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 一文教会你解决js数字精度丢失问题

    一文教会你解决js数字精度丢失问题

    在JavaScript中计算两个十进制数的和,有时候会出现令人惊讶的结果,相信这个大家也都知道了,下面这篇文章主要给大家介绍了关于解决js数字精度丢失问题的相关资料,需要的朋友可以参考下
    2022-08-08
  • JS实现图片切换效果

    JS实现图片切换效果

    这篇文章主要为大家详细介绍了基于JavaScript实现图片切换效果 ,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • 深入学习JavaScript对象

    深入学习JavaScript对象

    今天小编就和大家深入学习JavaScript对象,感兴趣的小伙伴们可以参考一下,大家一起学习。
    2015-10-10
  • 原生JS实现各种运动之复合运动

    原生JS实现各种运动之复合运动

    这篇文章主要为大家详细介绍了原生JS实现各种运动之复合运动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 原生js 实现表单验证功能

    原生js 实现表单验证功能

    这篇文章主要介绍了原生js如何实现表单验证功能,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下
    2021-02-02
  • JS如何实现文本框随文本的长度而增长

    JS如何实现文本框随文本的长度而增长

    这篇文章主要介绍了JS如何实现文本框随文本的长度而增长的方法,具有一定借鉴价值,需要的朋友可以参考下
    2015-07-07
  • js 获取屏幕各种宽高的方法(浏览器兼容)

    js 获取屏幕各种宽高的方法(浏览器兼容)

    js 获取屏幕各种宽高的方法(浏览器兼容),需要的朋友可以参考一下
    2013-05-05
  • ES6 Object.assign()的用法及其使用

    ES6 Object.assign()的用法及其使用

    这篇文章主要介绍了ES6 Object.assign()的用法及其使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • 如何使用js查找数组中符合条件的元素

    如何使用js查找数组中符合条件的元素

    这篇文章主要给大家介绍了关于如何使用js查找数组中符合条件的元素,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-04-04
  • JS异步文件上传(兼容IE8+)

    JS异步文件上传(兼容IE8+)

    本文主要介绍了JS实现异步文件上传的相关资料,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04

最新评论