ES6正则的扩展实例详解


Posted in Javascript onApril 25, 2017

本文实例讲述了ES6正则的扩展。分享给大家供大家参考,具体如下:

1. RegExp构造函数

ES5中,RegExp构造函数的参数:

参数是字符串,这时第二个参数表示正则表达式的修饰符(flag)

参数是一个正则表示式,这时会返回一个原有正则表达式的拷贝。但是,ES5不允许此时使用第二个参数,添加修饰符,否则会报错。

ES6改变了这种行为。如果RegExp构造函数第一个参数是一个正则对象,那么可以使用第二个参数指定修饰符。而且,返回的正则表达式会忽略原有的正则表达式的修饰符,只使用新指定的修饰符。

2. 字符串的正则表达式

字符串对象共有4个方法,可以使用正则表达式:match()、replace()、search()和split()。

ES6将这4个方法,在语言内部全部调用RegExp的实例方法,从而做到所有与正则相关的方法,全都定义在RegExp对象上。

String.prototype.match 调用 RegExp.prototype[Symbol.match]
String.prototype.replace 调用 RegExp.prototype[Symbol.replace]
String.prototype.search 调用 RegExp.prototype[Symbol.search]
String.prototype.split 调用 RegExp.prototype[Symbol.split]

3. u修饰符

ES6对正则表达式添加了u修饰符,含义为“Unicode模式”,用来正确处理大于\uFFFF的Unicode字符。

也就是说,会正确处理四个字节的UTF-16编码。对于码点大于0xFFFF的Unicode字符,点字符不能识别,必须加上u修饰符。

ES6新增了使用大括号表示Unicode字符,这种表示法在正则表达式中必须加上u修饰符,才能识别。

/\u{61}/.test('a') // false
/\u{61}/u.test('a') // true
/\u{20BB7}/u.test('?') // true

①.点字符

点(.)字符在正则表达式中,含义是除了换行符以外的任意单个字符。对于码点大于0xFFFF的Unicode字符,点字符不能识别,必须加上u修饰符。

var s = '';
/^.$/.test(s) // false
/^.$/u.test(s) // true

上面代码表示,如果不添加u修饰符,正则表达式就会认为字符串为两个字符,从而匹配失败。

②. 量词

使用u修饰符后,所有量词都会正确识别码点大于0xFFFF的Unicode字符。

/a{2}/.test('aa') // true
/a{2}/u.test('aa') // true
/ {2}/.test(' ') // false
/ {2}/u.test(' ') // true

另外,只有在使用u修饰符的情况下,Unicode表达式当中的大括号才会被正确解读,否则会被解读为量词。

/^\u{3}$/.test('uuu') // true

上面代码中,由于正则表达式没有u修饰符,所以大括号被解读为量词。加上u修饰符,就会被解读为Unicode表达式。

③. 预定义模式

u修饰符也影响到预定义模式,能否正确识别码点大于0xFFFF的Unicode字符。

\S是预定义模式,匹配所有不是空格的字符。只有加了u修饰符,它才能正确匹配码点大于0xFFFF的Unicode字符。

利用这一点,可以写出一个正确返回字符串长度的函数。

function codePointLength(text) {
 var result = text.match(/[\s\S]/gu);
 return result ? result.length : 0;
}
var s = '??';
s.length // 4
codePointLength(s) // 2

④. i修饰符

有些Unicode字符的编码不同,但是字型很相近,比如,\u004B与\u212A都是大写的K。

/[a-z]/i.test('\u212A') // false
/[a-z]/iu.test('\u212A') // true

上面代码中,不加u修饰符,就无法识别非规范的K字符。

4. y修饰符

除了u修饰符,ES6还为正则表达式添加了y修饰符,叫做“粘连”(sticky)修饰符。

y修饰符的作用与g修饰符类似,也是全局匹配,后一次匹配都从上一次匹配成功的下一个位置开始。

不同之处在于,g修饰符只要剩余位置中存在匹配就可,而y修饰符确保匹配必须从剩余的第一个位置开始,这也就是“粘连”的涵义。

var s = 'aaa_aa_a';
var r1 = /a+/g;
var r2 = /a+/y;
r1.exec(s) // ["aaa"]
r2.exec(s) // ["aaa"]
r1.exec(s) // ["aa"]
r2.exec(s) // null

上面代码有两个正则表达式,一个使用g修饰符,另一个使用y修饰符。这两个正则表达式各执行了两次,第一次执行的时候,两者行为相同,剩余字符串都是_aa_a。由于g修饰没有位置要求,所以第二次执行会返回结果,而y修饰符要求匹配必须从头部开始,所以返回null。

如果改一下正则表达式,保证每次都能头部匹配,y修饰符就会返回结果了。

var s = 'aaa_aa_a';
var r = /a+_/y;
r.exec(s) // ["aaa_"]
r.exec(s) // ["aa_"]

上面代码每次匹配,都是从剩余字符串的头部开始。

使用lastIndex属性,可以更好地说明y修饰符。

const REGEX = /a/g;
// 指定从2号位置(y)开始匹配
REGEX.lastIndex = 2;
// 匹配成功
const match = REGEX.exec('xaya');
// 在3号位置匹配成功
match.index // 3
// 下一次匹配从4号位开始
REGEX.lastIndex // 4
// 4号位开始匹配失败
REGEX.exec('xaxa') // null

上面代码中,lastIndex属性指定每次搜索的开始位置,g修饰符从这个位置开始向后搜索,直到发现匹配为止。

const REGEX = /a/y;
// 指定从2号位置开始匹配
REGEX.lastIndex = 2;
// 不是粘连,匹配失败
REGEX.exec('xaya') // null
// 指定从3号位置开始匹配
REGEX.lastIndex = 3;
// 3号位置是粘连,匹配成功
const match = REGEX.exec('xaxa');
match.index // 3
REGEX.lastIndex // 4

y修饰符同样遵守lastIndex属性,但是要求必须在lastIndex指定的位置发现匹配。

进一步说,y修饰符号隐含了头部匹配的标志^。

/b/y.exec('aba')
// null

单单一个y修饰符对match方法,只能返回第一个匹配,必须与g修饰符联用,才能返回所有匹配。

5. sticky属性

表示是否设置了y修饰符

var r = /hello\d/y;
r.sticky // true

6. flags属性

ES6为正则表达式新增了flags属性,会返回正则表达式的修饰符。(和前面是一个逆向的过程)

7. RegExp.escape()

字符串必须转义,才能作为正则模式。已经有提议将这个需求标准化,作为RegExp对象的静态方法RegExp.escape()

function escapeRegExp(str) {
 return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
}
let str = '/path/to/resource.html?search=query';
escapeRegExp(str)
// "\/path\/to\/resource\.html\?search=query"
Javascript 相关文章推荐
jquery ui对话框实例代码
May 10 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
Sep 03 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
JavaScript获取页面中表单(form)数量的方法
Apr 03 Javascript
JS随机洗牌算法之数组随机排序
Mar 23 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
微信小程序之小豆瓣图书实例
Nov 30 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
微信小程序模拟cookie的实现
Jun 20 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 Javascript
基于vue-cli3创建libs库的实现方法
Dec 04 Javascript
Javascript中八种遍历方法的执行速度深度对比
Apr 25 #Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
Apr 25 #Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 #Javascript
vue.js父组件使用外部对象的方法示例
Apr 25 #Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 #Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 #Javascript
整理一些最近经常遇到的前端面试题
Apr 25 #Javascript
You might like
php中的一个中文字符串截取函数
2007/02/14 PHP
PHP与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
php 网上商城促销设计实例代码
2012/02/17 PHP
php学习之function的用法
2012/07/14 PHP
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
python创建n行m列数组示例
2019/12/02 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
Python开发之身份证验证库id_validator验证身份证号合法性及根据身份证号返回住址年龄等信息
2020/03/20 Python
Python类的动态绑定实现原理
2020/03/21 Python
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
.NET remoting的两种通道是什么
2016/05/31 面试题
5个HTML5的常用本地存储方式详解与介绍
2021/03/27 HTML / CSS
信息管理专业推荐信
2013/10/29 职场文书
小学英语教学反思案例
2014/02/04 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
入党政审材料范文
2014/12/24 职场文书
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电