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

yizhihongxing

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

简介

在JavaScript中,字符串对象自带了match()和exec()方法用于字符串的正则匹配。两者的区别在于返回值不同。

match()方法

match()方法是String对象的一个方法。该方法接收一个正则表达式作为参数,并返回一个匹配结果数组,如果未匹配到则返回null。如果不给该方法传递参数,结果数组中会含有一个空字符串。

示例代码:

const str = "I have 3 apples and 2 oranges.";
const result = str.match(/\d+/g);
console.log(result);

运行结果:

["3", "2"]

在上面的代码中,String对象str通过调用match()方法并传入/\d+/g正则表达式进行匹配,返回两个数字“3”和“2”。

注意,match()方法不会返回关于子组的信息,即没有关于单括号()中的内容的信息,但是在全局模式下,它会返回数组中匹配到的所有结果。

exec()方法

exec()方法是RegExp对象的一个方法。该方法接收一个字符串作为参数,并在该字符串上执行正则表达式匹配,返回匹配到的第一个结果。当RegExp设置了全局模式(g),exec()将从匹配到的子字符串后的字符开始寻找下一个匹配项。如果没有找到,则返回null。

示例代码:

const regex = /\d+/g;
const str = "I have 3 apples and 2 oranges.";
let result;

while ((result = regex.exec(str)) !== null) {
  console.log(`找到 ${result[0]},从位置 ${result.index} 开始`);
}

运行结果:

找到 3,从位置 7 开始
找到 2,从位置 23 开始

在上面的代码中,RegExp对象regex执行全局匹配,当前匹配到的结果通过while循环与null做比较,直到匹配结束。每次循环输出匹配结果及其位置。

对比

虽然exec()和match()方法都是用于字符串的正则匹配,两者之间还是有一些细微的区别。

  1. 返回值不同

match()方法返回匹配到的结果数组,而exec()方法则返回一个匹配到的结果对象。

  1. 全局模式下表现不同

在全局模式下,match()方法返回所有匹配到的结果数组,而exec()方法返回第一个匹配到的结果对象,并且每次调用exec()方法时都会向下寻找下一个匹配项,直到全部匹配结束。

示例1

假设有一个字符串需要取出其中的数字,我们可以使用match()方法:

const str = "I have 3 apples and 2 oranges.";
const nums = str.match(/\d+/g);
console.log(nums); // ["3", "2"]

示例代码中把字符串中的数字通过正则表达式匹配并返回。

示例2

假如需要找出字符串中所有匹配项的起始位置和匹配内容,可以使用exec()方法:

const regex = /\d+/g;
const str = "I have 3 apples and 2 oranges.";
let result;
while ((result = regex.exec(str)) !== null) {
  console.log(`找到 ${result[0]},从位置 ${result.index} 开始`);
}

示例代码中我们通过正则表达式匹配出字符串中的所有数字,输出的结果包含每个数字及其起始位置1。

总结

exec()和match()这两个方法虽然都是用于字符串的正则匹配,但是它们的使用场景不同:

  • 如果只需要取出字符串中的所有匹配项,应该使用match()方法。
  • 如果需要对某个字符串执行多次匹配操作,或者需要找到匹配项的位置,那么应该使用exec()方法。

注意:由于match()会返回所有匹配结果,所以它比exec()方法更占用内存。因此,在执行全局匹配并需要对匹配项逐个进行操作的时候,exec()要优于match()方法。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS前端开发之exec()和match()的对比使用 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • js读取配置文件自写

    下面是详细讲解“js读取配置文件自写”的完整攻略。 1. 什么是配置文件 配置文件是一种文本文件,用于存储程序运行时需要的信息,比如数据库配置、服务器地址、API密钥等等。在大型项目中,通常还会有多个环境(如开发环境、测试环境、生产环境)需要不同的配置信息,这时就需要使用配置文件来统一管理和修改。 2. 读取配置文件 在JavaScript中,可以通过XML…

    JavaScript 2023年5月27日
    00
  • vue使用keep-alive保持滚动条位置的实现方法

    当我们在Vue应用中使用Vue-router进行路由跳转时,如果跳转到的页面存在滚动条,那么这时候就会存在一个问题,就是当我们返回到之前的路由时,滚动条会自动回到顶部,而不是保持在之前的位置。而我们可以使用keep-alive组件来保持滚动条位置。 Vue中keep-alive组件的使用 Vue中的keep-alive组件可以帮助我们在组件切换时,保留组件状…

    JavaScript 2023年6月11日
    00
  • jQuery.validate.js表单验证插件的使用代码详解

    那我就来详细讲解一下“jQuery.validate.js表单验证插件的使用代码详解”的攻略吧。 什么是jQuery.validate.js表单验证插件? jQuery.validate.js是一个jQuery的表单验证插件,它可以方便地实现表单输入内容的合法性检测和提示。 如何引入jQuery.validate.js? 在使用jQuery.validate…

    JavaScript 2023年6月10日
    00
  • 详解JSON和JSONP劫持以及解决方法

    下面是详解JSON和JSONP劫持及解决方法的攻略。 什么是JSON和JSONP JSON JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式,其格式简单明了,易于阅读和编写,同时也易于机器解析和生成。JSON是一种完全独立于编程语言的数据格式,它的性能优越,能够处理庞大的数据量。 JSON数据格式示例: { &q…

    JavaScript 2023年5月27日
    00
  • JavaScript面向对象核心知识与概念归纳整理

    下面我将详细讲解“JavaScript面向对象核心知识与概念归纳整理”的完整攻略。 JavaScript面向对象核心知识与概念归纳整理 什么是面向对象编程? 面向对象编程是一种编程方法,将现实世界中的实体抽象成一种对象,然后通过不同对象之间的交互实现程序功能。面向对象的编程方式比面向过程编程更加灵活、可重复使用,模块化程度也更高。 在 JavaScript …

    JavaScript 2023年5月27日
    00
  • 微信小程序全局文件的使用详解

    微信小程序全局文件的使用详解 什么是微信小程序全局文件 微信小程序中,全局文件是指 app.js、app.json 和 app.wxss,它们分别用于配置小程序的全局信息、全局样式和全局脚本。这些文件都处于小程序的根目录下,并且是小程序初始化时自动载入的,所以我们可以在全局文件中定义小程序的整体风格和功能。 app.json app.json 是小程序的全局…

    JavaScript 2023年6月11日
    00
  • 用js编写的简单的计算器代码程序

    为了编写一个简单的计算器程序,我们可采用HTML、CSS、JavaScript等技术。下面将分步骤讲解如何制作一个基于JS编写的简易计算器程序。 步骤一:创建基本的HTML代码 我们需要创建一个空白的HTML文件,并添加必要的元素,例如标题,文本输入框和按钮。通过以下HTML代码可以实现: <!DOCTYPE html> <html>…

    JavaScript 2023年5月27日
    00
  • 解决ie img标签内存泄漏的问题

    解决IE浏览器中img标签内存泄漏问题,需要遵循以下三个步骤: 1. 使用JavaScript动态创建img元素 在IE浏览器中,使用img标签将图片插入到HTML文档中时,需要先在浏览器缓存中将图片缓存下来,而当img被移除时,缓存并不会被自动清除,会导致内存泄漏。 来自IBM的一篇文章提出了使用JavaScript动态创建img元素的方案,可以避免该问题…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部