所谓正则表达式,又称规则表达式。(英语:Regular Expression,在代码中常简写为regex、regexp或RE),计算机科学的一个概念。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。在之前使用基于Jquery库开发项目的时候,用的正则表达式最多的就是一些输入框的检验,比如检验电话号码或者邮箱的格式是否合适等。

  在ES5中,RegExp构造函数的参数有两种情况:

  一、参数是字符串,这是第二个参数标识正则表达式的修饰符(flag)。

  var regex = new RegExp('xyz', 'i');

  //  等价于 var regex = /xyz/i;

  二、参数是一个正则表达式,这时会返回一个原有正则表达式的拷贝。

  var regex = new RegExp( /xyz/i) ;

  //  等价于 var regex = /xyz/i;

  但是ES5不允许此时使用第二个参数添加修饰符,即第一种方式,否则就会报错。ES6改变了这种行为,如果RegExp构造函数第一个参数是正则表达式,那么可以使用第二个参数指定修饰符。而且,返回的正则表达式会忽略原有正则表达式的修饰符,只有重新指定。下面为大家介绍一下ES6对正则表达式新增的各种修饰符:

  1、u修饰符

  ES6对正则表达式添加u修饰符,含义为“Unicode模式”,用来正确处理大于\uFFFF的Unicode字符,也就是说可以正确处理4个字节的UTF-16编码。

  2、y修饰符

  y修饰符又叫粘连,与g修饰符类似,都是从上一次匹配成功的下一个位置开始,只不过y修饰符会确保匹配必须从剩余的第一个位置开始。

  3、s修饰符

  s修饰符就是doAll模式,字符串中所有的字符都匹配,包括换行符(\n)、回车符(\r)等。

  介绍完各种修饰符之后,为大家重点介绍具名组匹配,简而言之就是正则表达式使用圆括号进行组匹配,先看下面一段代码

  

  

 const RE_DATA = /(\d{4})-(\d{2})-(\d{2})/;
const maset = RE_DATA.exec('1999-12-31');
console.log(maset[1]);
console.log(maset[2]);
console.log(maset[3]); //
//
//

组匹配

  看完这段代码是不是觉得之前自己处理时间的时候白白写了很多代码,反正我是这样觉得的,我一直都是对后台传给我的时间字段进行split分隔,显得很low,有了组匹配是不是高大上了很多,嘿嘿。

  所谓具名组匹配就是在圆括号内部,在模式的头部添加“问号 + 尖括号 + 组名”,然后在exec方法中返回结果的groups属性上引用该组名,看下面代码

  

 const RE_DATA_REG = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;

 const maset_re = RE_DATA_REG.exec('1999-12-31');

 console.log(maset_re.groups.year);
console.log(maset_re.groups.year);
console.log(maset_re.groups.year); //
//
//

ES6标准入门之正则表达式的拓展的更多相关文章

  1. ES6标准入门之数值的拓展解说

    ES6提供了二进制和八进制数值的新写法,分别用前缀0b(或0B)和0o(或0O)表示. 0b111110111 === 503                    // true 0o767 === ...

  2. ES6标准入门之字符串的拓展讲解

    在开始讲解ES6中字符串拓展之前,我们先来看一下ES5中字符串的一些方法. 获取字符串长度 str.length 分割字符串 str.split() 拼接字符串 str1+str2 或 str1.co ...

  3. ES6标准入门之变量的解构赋值简单解说

    首先我们来看一看解构的概念,在ES6标准下,允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,这被称作解构,简而言之粗糙的理解就是变相赋值. 解构赋值的规则是,只要等号右边的值不是对象或者数组 ...

  4. 【学习笔记】ES6标准入门

    这里简要记录一下对自己感触比较深的几个知识点,将核心的应用投放于实际的项目之中,提供代码的可维护性. 一.let和const { // let声明的变量只在let命令所在的代码块内有效 let a = ...

  5. [转] 《ES6标准入门》读书笔记

    来源:https://segmentfault.com/a/1190000005863641 let和const命令 ES6新增let命令,用于声明变量,是块级作用域. let声明的变量不会像var声 ...

  6. ES6标准入门 第一章:简介

    ECMAScript 6 是JavaScript 语言的下一代标准:发布于2015年,又称为ECMAScript 2015. ECMAScript 与 JavaScript 的关系:前者是后者的规范, ...

  7. ES6标准入门 第五章:正则的扩展

    1.RegExp 构造函数 ES5的缺陷: ES5中构造函数的参数有两种情况: (1)参数是字符串,这时第二个参数表示正则表达式的的修饰符(flag). var reg = new RegExp( & ...

  8. ES6标准入门(第三版).pdf----推荐指数⭐⭐⭐⭐⭐

    链接: https://pan.baidu.com/s/13RHsyTMNx7s1oMqQeYCm3Q 提取码: ikg3 -------------------------------------- ...

  9. 《ES6标准入门》(阮一峰)--11.对象的新增方法

    1.Object.is() ES5 比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===).它们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0.J ...

随机推荐

  1. Bower前端模块管理器

    cnpm install bower -g 安装bower bower install jquery //bower会自动去网上找到最新版本的jquery bower uninstall jquery ...

  2. net 反射30分钟速成

    概述 什么是反射 Reflection,中文翻译为反射.        这是.Net中获取运行时类型信息的方式,.Net的应用程序由几个部分:‘程序集(Assembly)’.‘模块(Module)’. ...

  3. 整数对(hdu1271)找规律

    整数对 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submissio ...

  4. retrofit2 不创建对象直接返回字符串

    retrofit请求直接返回string 有个需求是直接用retrofit去get网页得到html,不创建对象. 用上面文章讲的方法,直接返回ResponseBody ICollection: pub ...

  5. Android Service基础知识你知道多少?

    Android四大组件-Service 多次调用startService会怎样?会执行多次onCreate吗? StopService在哪里调用?stopSelf在哪调用? 怎样使Service被ki ...

  6. .net解决Xss攻击

    首先要明白什么是Xss攻击 XSS是一种经常出现在web应用中的计算机安全漏洞,它允许恶意web用户将代码植入到提供给其它用户使用的页面中.比如这些代码包括HTML代码和客户端脚本.攻击者利用XSS漏 ...

  7. Vue之组件使用(二)

    补充一下:之前没提到,这里是一个父子组件通信的方法 如果想要使同一个组件实现不同的效果,那么可以这样做. 把需要封装的组件模板写在template中 <template id="cou ...

  8. HDU4417(SummerTrainingDay08-N 主席树)

    Super Mario Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  9. 如何启动一个Vue3.x项目

    1. 安装node.js 2. cd到项目目录下 3. npm run serve Node.js下载与安装(npm) Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运 ...

  10. 小程序 波浪进度球 wave

    直接上代码: //index.js //获取应用实例 const app = getApp() var wave = function (ctx, oRange){ var tid; //oRange ...