js正则表达式之前瞻后顾与非捕获分组

目录
  • 前瞻后顾与捕获分组的结合使用
  • 捕获分组与非捕获分组
  • 前瞻、后顾与负前瞻、负后顾
  • 总结

前瞻后顾与捕获分组的结合使用

在现实的应用场景中,捕获分组或非捕获分组通常被限制在前瞻后顾条件内,举例来说,对数字12345678格式化,结果为12,345,678。其正则实现如下:

let formatSum = '12345678'.replace(/\B(?=(?:\d{3})+(?!\d))/g, ',')

捕获分组与非捕获分组

为了理解前瞻与后顾,首先要先理解捕获分组与非捕获分组

在js中,

()表示捕获分组,() 会把每个分组里的匹配的值保存起来,使用$n(n是一个数字,表示第n个捕获组的内容);

(?:)表示非捕获分组,和捕获分组唯一的区别在于,非捕获分组匹配的值不会保存起来。

以formatSum 表达式为例,(?=(?:\d{3})+(?!\d)) ,(?:\d{3}) ,(?!\d) 都是分组,其中第二个分组是非捕获分组。

前瞻、后顾与负前瞻、负后顾

在上述的formatSum表达式中,用到了 ‘?=‘与'?!',这就是所谓的前瞻与负前瞻了。为了方便理解,我们以一个简单的例子入手。

// 前瞻:
A(?=B)   //查找B前面的A
// 后顾:
(?<=B)A   //查找B后面的A
// 负前瞻:
A(?!B)   //查找后面不是B的A
// 负后顾:
(?<!B)A   //查找前面不是B的A

回看formatSum表达式,将 (?:\d{3})+(?!\d) 视为一个整体表达式 A,即

formatSum = /\B(?=A)/g  //此处A为表示式并非真正字母A,只为方便理解

其意思是匹配表达式A前面的 \B ,而 \B 匹配的是非字母边界,所以可以看出该表达式整体的作用是用来匹配并替换表达式 A 前边的边界的。

与 \B 对应的还有 \b ,其匹配字母边界。对于初学者来说,边界的概念比较难以理解,你可以把它看作是无形的 | ,任何长度大于等于2的字符串中都存在边界。如 ‘ab',它可以看作是'a|b', 只是此处 | 是无形的,当然它也就不计入字符串长度。

'ab'.replace(/\B/, ',')
//  a,b

接下来为了看表达式 A 部分: (?:\d{3})+(?!\d) 。

首先 ?: 表示非捕获分组,\d{3} 表示3位数字,则 (?:\d{3})+ 表示3、6、9、12…位数字;

(?!\d) 为负前瞻,表示匹配后面不是数字的 (?:\d{3})+ 。综上:

(?:\d{3})+(?!\d)  

匹配'12345678'中后面不是数字的3*n(n=1递增)位数字,即'678', '345678'

所以,得出结果:

formatSum = '12345678'.replace(/\B(?=(?:\d{3})+(?!\d))/g, ',')

匹配'12345678'中后面不是数字的3*n(n=1,n++)位数字前面的非字母边界,
即'678', '345678'前面的非字母边界,最终将这两个边界替换为逗号,
即 '3' 与 '6' 前加逗号

'12345678'.replace(/\B(?=(?:\d{3})+(?!\d))/g, ',')  === '12,345,678'
// true

总结

到此这篇关于js正则表达式之前瞻后顾与非捕获分组的文章就介绍到这了,更多相关js正则前瞻后顾与非捕获分组内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-10-13

JS正则表达式之非捕获分组用法实例分析

本文实例讲述了JS正则表达式非捕获分组用法.分享给大家供大家参考,具体如下: 最近在看JsonSQL的时候,通过源码中的一段正则表达式,了解到了什么是非捕获分组以及它的使用场景.在js中,正常的捕获分组格式是(XX),非捕获分组格式为(?:XX).我们先从正则表达式数量词说起,如果我们要求字符b至少出现一次,可以使用正则/b+/:如果要求ab至少出现一次,那么必需使用/(ab)+/,不能用/ab+/.也就是说,如果想对多个字符使用数量词,必需要用圆括号. var str = "a1***ab1c

js HTML DOM EventListener功能与用法实例分析

本文实例讲述了js HTML DOM EventListener功能与用法.分享给大家供大家参考,具体如下: DOM EventListener 用于向指定元素添加事件句柄. 在用户点击按钮时触发监听事件: document.getElementById('myBtn').addEventListener('click', displayDate); addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄. 可以向一个元素添加多个事件句柄. <script> var

JS回调函数基本定义与用法实例分析

本文实例讲述了JS回调函数基本定义与用法.分享给大家供大家参考,具体如下: 初学js的时候,被回调函数搞得很晕,现在回过头来总结一下什么是回调函数. 我们先来看看回调的英文定义:A callback is a function that is passed as an argument to another function and is executed after its parent function has completed. 字面上的理解,回调函数就是一个参数,将这个函数作为参数传到

JS高阶函数原理与用法实例分析

本文实例讲述了JS高阶函数原理与用法.分享给大家供大家参考,具体如下: 如果您正在学习JavaScript,那么您必须遇到高阶函数这个术语.这听起来复杂,其实不然. 使JavaScript适合函数式编程的原因是它接受高阶函数. 高阶函数在JavaScript中广泛使用.如果你已经用JavaScript编程了一段时间,你可能已经使用它们甚至不知道. 要完全理解这个概念,首先必须了解函数式编程是什么一等函数(first-Class Function)以及的概念. 函数式编程 在大多数简单的术语中,函

js核心基础之构造函数constructor用法实例分析

本文实例讲述了js核心基础之构造函数constructor用法.分享给大家供大家参考,具体如下: 在js中,可以利用构造函数来创建特定类型的对象,其中,有一些原生的构造函数,Object.Array.等等,所以,当type of Object时,返回的是function.此外,我们还可以创建自定义的构造函数,从而自定义对象的属性以及方法. 例如: function Person(name,age,job) { this.name=name; this.age=age; this.job=job;

jQuery高级编程之js对象、json与ajax用法实例分析

本文实例讲述了jQuery高级编程之js对象.json与ajax用法.分享给大家供大家参考,具体如下: js对象 创建js对象的两种方式: 1.通过new Object创建: var p1 = new Object(); // 设置属性,和方法 p1.name = "张三"; p1.age = 13; p1.study = function(){ console.log(p1.name + "正在学习,葵花宝典"); } // 调用属性和方法 console.log

JS数据双向绑定原理与用法实例分析

本文实例讲述了JS数据双向绑定原理与用法.分享给大家供大家参考,具体如下: 通常在前端开发过程中,经常遇到需要绑定两个甚至多个元素之间的值,比如将input的值绑定到一个h1上,改变input的值,h1的文字也自动更新. <h1 id="title">Hello</h1> <input type="text" id="a" /> 首先是在界面上更改input的值,需要监听input的"input&qu

JS中call和apply函数用法实例分析

本文实例讲述了JS中call和apply函数用法.分享给大家供大家参考,具体如下: call 函数 语法 obj.call(thisObj,arg[,arg2[,arg3[,...agr]]]); 简介 thisObj继承obj的属性和方法(obj原型链上的属性和方法不能被继承),后面的参数会当成obj的参数安装顺序传递进去. 示例 function animal(type,nickname){ this.type = type; this.nickname = nickname; this.s

Laravel5.1框架路由分组用法实例分析

本文实例讲述了Laravel5.1框架路由分组用法.分享给大家供大家参考,具体如下: 路由分组有啥好处? 有时候啊 一大堆路由它们都有共同的地方,比如都使用一个中间件(过两天写)或是前缀都一样,避免代码重复 我们可以将他们分到一组中. 1 路由分组可以共享哪些属性? 中间件 middleware. 控制器的命名空间 namespace. 子域名 domain 路由前缀 1.1 中间件 关于中间件大K还没有写笔记介绍,这里先简单说下 中间件就是接收到请求后验证一些东西或相应后验证一些东西,比如La

JS数组方法shift()、unshift()用法实例分析

本文实例讲述了JS数组方法shift().unshift()用法.分享给大家供大家参考,具体如下: shift()方法 1. 定义:从数组中删除第一个元素,并返回该元素的值.此方法更改数组的长度. 2. 语法: arr.shift() 3. 参数:/ 4. 返回值:从数组中删除的元素(当数组为空时返回undefined). 代码如下: 方法一: var arr1 = [1, 2, 3, 4, 'A', 'B', 'C']; var arr2 = []; Array.prototype.copyS