【0基础教程】Javascript 里的分组正则Capturing Groups使用方法及原理

这篇具有很好参考价值的文章主要介绍了【0基础教程】Javascript 里的分组正则Capturing Groups使用方法及原理。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

【0基础教程】Javascript 里的分组正则Capturing Groups使用方法及原理

一、从最简单开始

现有一个字符串: “1-apple”
需要解析出 1 和 apple 来,对应的正则表达式很简单: ^(\d)-(.+)$
其中,
^ 表示字符串的开始,然后一个圆括号包裹的内容表示一个"组":(\d) 表示一组数字, (.+) 表示是一组任意值;$ 表示字符串的结束。
对应的代码:

        const str = "1-apple"
        const regexp = /^(\d)-(.+)$/
        let match = regexp.exec(str)
        console.log(match[0])
        console.log(match[1])
        console.log(match[2])

注意,尽管只有两个括号,但是正则的返回值却有三个:

match[0] = 1-apple
match[1] = 1
match[2] = apple

match[0] 返回的是一个完整匹配,其值就是str本身。显然在这个例子中 match[0] 并没有什么用,因为我们真正要解析的内容是 match[1] 和 match[2]。


二、重复模式分组

如果字符串中出现多次重复的模式( pattern ),比如碰到这种情况时:
1-apple
2-orange
3-pear
以上三行文字,尽管内容不同,但规律是一样的,即每一行都是:(数字)-(任意值)
因此我们可以使用一个正则表达式来匹配这3行文字,注意后面需要增加 gm 标识符,(g代表global,m代表multi line),代码如下:

        const str = "1-apple\n2-orange\n3-pear"
        const regexp = /^(\d)-(.+)$/gm   //注意:和上例相比,唯一的区别是后面加了gm标志
        let match = regexp.exec(str)
        console.log(match[0])
        console.log(match[1])
        console.log(match[2])

运行结果:

match[0] = 1-apple
match[1] = 1
match[2] = apple

只解析了 1-apple 出来,那么我们如何解析出 2-orange3-pear 呢?
让我们修改一下代码:

        const str = "1-apple\n2-orange\n3-pear"
        const regexp = /^(\d)-(.+)$/gm
        let match
        match = regexp.exec(str) // 第1次触发
        console.log(match[0])
        console.log(match[1])
        console.log(match[2])

        match = regexp.exec(str) // 第2次触发
        console.log(match[0])
        console.log(match[1])
        console.log(match[2])

        match = regexp.exec(str) // 第3次触发
        console.log(match[0])
        console.log(match[1])
        console.log(match[2])

运行结果:

1-apple
1
apple

2-orange
2
orange

3-pear
3
pear

在这个例子里,我们连续三次触发了match = regexp.exec(str) 这行语句,
事实上,尽管语句完全一样,但是每一次match的返回值都不同。在带有 gm 标识符时,.exec方法会将当前匹配值的首字符位置保存在 index 变量里(注:不带 gm 标识符没有这个变量),当下一次触发.exec的时候,index 并不是从0开始搜索,而是从第一次匹配完成之后的位置进行第二次匹配,如此反复,直至将整个字符匹配完成为止。

知道了 .exec 这个方法可以反复执行这个小秘密之后,将代码再改改就很简单了:

        const str = "1-apple\n2-orange\n3-pear"
        const regexp = /^(\d)-(.+)$/gm   //注意:和上例相比,唯一的区别是后面加了gm标志
        let match
        while ((match = regexp.exec(str)) !== null) {
            console.log('index = ', match.index)
            console.log('result = ', match[0], match[1], match[2])
        }

运行结果:

index = 0
result = 1-apple 1 apple
index = 8
result = 2-orange 2 orange
index = 17
result = 3-pear 3 pear

或者,我们还可以将结果 push 到一个二维数组里以方便使用:

        const str = "1-apple\n2-orange\n3-pear"
        const regexp = /^(\d)-(.+)$/gm 
        let match
        let matches = []
        while ((match = regexp.exec(str)) !== null) {
            matches.push(match)
        }
        console.log(matches[0][1]) // 显示:1
        console.log(matches[0][2]) // 显示:apple
        console.log(matches[1][1]) // 显示:2
        console.log(matches[1][2]) // 显示:orange
        console.log(matches[2][1]) // 显示:3
        console.log(matches[2][2]) // 显示:pear

三、matchAll 登场

如果你不喜欢while循环方式,还可以使用 matchAll ,就可以不必使用 while 循环加 exec 方式。使用 matchAll 会得到一个迭代器的返回值,配合 for…of, array spread, 或者 Array.from() 可以更方便实现功能。

        const str = "1-apple\n2-orange\n3-pear"
        const regexp = /^(\d)-(.+)$/gm

        const matches = str.matchAll(regexp) // 采用matchAll进行匹配

        for (const match of matches) { // 采用 for of 方式读取
            console.log('index = ', match.index)
            console.log('result = ', match[0], match[1], match[2])
        }

这段代码效果和上例完全一样。

此外,我们也可以用Array.from() 实现同样的效果:

        const str = "1-apple\n2-orange\n3-pear"
        const regexp = /^(\d)-(.+)$/gm

        const matches = str.matchAll(regexp) 
        Array.from(matches, (match) => { // 采用 Array.from方式读取
            console.log('index = ', match.index)
            console.log('result = ', match[0], match[1], match[2])
        })

或者更简单的ES6的“三个点”语法( array spread ):

        const str = "1-apple\n2-orange\n3-pear"
        const regexp = /^(\d)-(.+)$/gm

        const matches = [...str.matchAll(regexp)] // 采用 ... 方式展开str.matchAll(regexp)

		// 遍历数组
        for (let i = 0; i < matches.length; i++) {
            console.log('index = ', matches[i].index)
            console.log('result = ', matches[i][0], matches[i][1], matches[i][2])
        }

三个点称为 “array spread” 或者“展开语法”,它的作用很多很杂,没有展开语法的时候,只能组合使用 push, splice, concat 等方法,来将已有数组元素变成新数组的一部分。有了展开语法,通过字面量方式,构造新数组会变得更简单、更优雅,比如:

        const str = "1-apple\n2-orange\n3-pear"
        const regexp = /^(\d)-(.+)$/gm

        const matches = [...str.matchAll(regexp)] // 采用 ... 方式展开str.matchAll(regexp)

        console.log(matches[0][1]) // 显示:1
        console.log(matches[0][2]) // 显示:apple
        console.log(matches[1][1]) // 显示:2
        console.log(matches[1][2]) // 显示:orange
        console.log(matches[2][1]) // 显示:3
        console.log(matches[2][2]) // 显示:pear

三个点 “…” 将 str.matchAll(regexp) 展开之后,我们将直接获得一个二维数组,不需要额外执行 push 操作,与前面介绍的办法相比,更简单、直观。


四、后记

本文只列举了非常简单的关于正则分组的基础案例,进一步研究可以阅读以下资料:

【matchAll()详解】:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll

【array spread 展开语法详解】:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax文章来源地址https://www.toymoban.com/news/detail-478828.html

到了这里,关于【0基础教程】Javascript 里的分组正则Capturing Groups使用方法及原理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • javaScript基础语法之正则表达式

    表达式 描述 [0-9] 查找任何从 0 至 9 的数字。例如,匹配: \\\'111\\\' ,不匹配:\\\'eee\\\' [abc] 查找方括号之间的任何字符。例如,/[123]/ 匹配 \\\"1234567\\\" 中的 \\\"123\\\",\\\"1\\\" 中的 \\\"1\\\"。但是不匹配 \\\"4567890\\\"。 [^abc] 查找任何不在方括号之间的字符。例如,/[^123]/ 匹配 \\\"4567890\\\" 中的 \\\"4567890\\\"。但是不匹

    2024年02月09日
    浏览(51)
  • 【23JavaScript 正则表达式】深入解析JavaScript正则表达式:基础概念、常用方法和实例详解,轻松掌握强大的文本模式匹配工具

    正则表达式是一种强大的文本模式匹配工具,用于在字符串中搜索和操作特定的文本模式。在JavaScript中,正则表达式提供了一种灵活的方式来处理字符串操作。 在JavaScript中,可以通过使用字面量表示法或RegExp对象来创建正则表达式。 字面量表示法 RegExp对象 JavaScript中的正则

    2024年02月08日
    浏览(64)
  • postman 正则提取html里的值

    如上图,获取key的值,在test编辑以下语句 var pubKey = responseBody.match(new RegExp(\\\"key = \\\'(.*?)\\\'\\\")) console.log(pubKey[1])

    2024年02月07日
    浏览(37)
  • 正则表达式-分组括号以及捕获分组

    在java正则表达式中,( )是分组的意思,每组都有一个组号 只看左括号,不看右括号,按照左括号的顺序,从左往右,依次为第一组,第二组,第三组等等,如图: 根据左括号分成了三组 捕获分组,非捕获分组 可以获取某一组中的内容反复使用 规则: 正则表达式内部使

    2024年01月22日
    浏览(103)
  • 正则表达式在java里的运用

    例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。 正则表达式是一种用于匹配文本模式的表达式。它由一些特定的字符和元字符组成,可以帮助我们快速地、准确地从文本中匹配出我们想要

    2024年02月07日
    浏览(36)
  • chatgpt赋能python:Python分组匹配:了解正则表达式中的分组匹配技巧

    在 Python 中,正则表达式是一种重要的文本处理工具,它可以帮助我们在字符串中匹配、查找和替换特定的文本模式。其中,分组匹配是正则表达式的重要特性之一,它可以将匹配的结果按照指定的规则进行分组,以便更好地处理和使用。在本文中,我们将介绍 Python 中的分组

    2024年02月06日
    浏览(47)
  • notepad++配合正则表达式分组模式处理文本转化为sql语句

    一、正则分组知识点补充 正则分组和捕获 ():用于分组和捕获子表达式。 大白话就是()匹配到的数据,通过美元符号加下标可以获取该数据,例如$1、$2, 下标从1开始。 下面的案例就采用该模式处理文本数据 二、使用正则的需求背景 有一份报表的数据,需要把数据入库到m

    2024年02月07日
    浏览(60)
  • 【JS】js数组分组,javascript实现数组的按属性分组

    项目代码中有很多时候需要按一定的条件实现按属性分组 你可以使用JavaScript的 Array.prototype.reduce() 方法来将数组分组。这是一种高级的方法,它可以将数组元素组合成一个单值。在这种情况下,你可以使用它来把数组元素放到一个对象中,其中对象的键是分组的条件,值是所

    2023年04月08日
    浏览(50)
  • JavaScript 终于原生支持数组分组了!

    在日常开发中,很多时候需要对数组进行分组,每次都要手写一个分组函数,或者使用lodash的 groupBy 函数。好消息是,JavaScript 现在正在引入全新的分组方法: Object.groupBy 和 Map.groupBy ,以后再也不需要手写分组函数了,目前最新版本的 Chrome(117)已经支持了这两个方法! 假

    2024年02月08日
    浏览(36)
  • JavaScript经典教程(七)-- JavaScript基础 -- 函数、argument、匿名函数、函数深入、选项卡

    1、函数 (1)特性 1、每个函数都有自己的作用域。 2、如果执行该变量名,会返回自己,即返回函数本身。 3、正常调用,返回函数中的执行结果。 当函数中无执行内容时,返回默认return=undefind;(每个函数都有默认return=undefined) 当函数中有执行内容时,返回返回值。 4、re

    2024年02月02日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包