ES6正则表达式扩展笔记


Posted in Javascript onJuly 25, 2017

 前面的话

正则表达式是javascript操作字符串的一个重要组成部分,但在以往的版本中并未有太多改变。然而,在ES6中,随着字符串操作的变更, ES6也对正则表达式进行了一些更新。本文将详细介绍ES6正则表达式扩展

构造函数

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

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

var regex = new RegExp('xyz', 'i');
// 等价于
var regex = /xyz/i;

第二种情况是,参数是一个正则表示式,这时会返回一个原有正则表达式的拷贝

var regex = new RegExp(/xyz/i);
// 等价于
var regex = /xyz/i;

但是,ES5 不允许此时使用第二个参数添加修饰符,否则会报错

// Uncaught TypeError: Cannot supply flags when constructing one RegExp from another
var regex = new RegExp(/xyz/, 'i');

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

console.log(new RegExp(/abc/ig, 'i').flags);//i

上面代码中,原有正则对象的修饰符是ig,它会被第二个参数i覆盖

【flags】

ES6 为正则表达式新增了flags属性,会返回正则表达式的修饰符

//ES5的source属性返回正则表达式的正文
/abc/ig.source//"abc"
// ES6的flags属性返回正则表达式的修饰符
/abc/ig.flags//'gi'

正则方法

字符串对象共有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]

u修饰符

正则表达式可以完成简单的字符串操作,但默认将字符串中的每一个字符按照16位编码处理。为了解决这个问题, ES6 对正则表达式添加了u修饰符,含义为“Unicode模式”,用来正确处理大于\uFFFF的 Unicode 字符。也就是说,会正确处理四个字节的 UTF-16 编码

/^\uD83D/u.test('\uD83D\uDC2A') // false
/^\uD83D/.test('\uD83D\uDC2A') // true

一旦为正则表达式设置了 u 修饰符,正则表达式将会识别32位的辅助平面字符为1个字符,而不是两个

【点号】

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

var text = "?" ;
console.log(text.length); // 2
console.log(/^.$/.test(text));//false
console.log(/^.$/u.test(text)); //true

【大括号】

ES6 新增了使用大括号表示 Unicode 字符,这种表示法在正则表达式中必须加上u修饰符,才能识别当中的大括号,否则会被解读为量词

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

【量词】

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

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

【预定义模式】

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

/^\S$/.test('?') // false
/^\S$/u.test('?') // true

【字符串长度】

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

虽然ES6不支持字符串码位数量的检测,length属性仍然返回字符串编码单元的数量。利用[\s\S],再加上u修饰符,就可以写出一个正确返回字符串长度的函数

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

【检测支持】

u修饰符是语法层面的变更,尝试在不兼容 ES6 的 JS 引擎中使用它会抛出语法错误。如果要检测当前引擎是否支持u修饰符,最安全的方式是通过以下函数来判断

function hasRegExpU() {
  try {
    var pattern = new RegExp(".", "u");
    return true;
  } catch (ex) {
    return false;
  }
}

这个函数使用了RegExp构造函数并传入字符串'u'作为参数,该语法即使在旧版 JS 引擎中也是有效的。但是,如果当前引擎不支持u修饰符则会抛出错误

y修饰符

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

y修饰符的作用与g修饰符类似,也是全局匹配,后一次匹配都从上一次匹配成功的下一个位置开始。不同之处在于,g修饰符只要剩余位置中存在匹配就可,而y修饰符确保匹配必须从剩余的第一个位置开始,这也就是“粘连”的涵义

【全局匹配】

y修饰符的设计本意,就是让头部匹配的标志^在全局匹配中都有效

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

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

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

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

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

【非全局匹配】

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

'a1a2a3'.match(/a\d/y) // ["a1"]
'a1a2a3'.match(/a\d/gy) // ["a1", "a2", "a3"]

[注意]y修饰符只有在调用 exec()和test()这两个正则匹配方法时,才会进行全局匹配;如果调用match()、replace()等字符串的方法时,不会进行全局匹配

【stiky属性】

与y修饰符相匹配,ES6 的正则对象多了sticky属性,表示是否设置了y修饰符

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

【应用】

y修饰符的一个应用,是从字符串提取 token(词元),y修饰符确保了匹配之间不会有漏掉的字符

const TOKEN_Y = /\s*(\+|[0-9]+)\s*/y;
const TOKEN_G = /\s*(\+|[0-9]+)\s*/g;
tokenize(TOKEN_Y, '3 + 4')// [ '3', '+', '4' ]
tokenize(TOKEN_G, '3 + 4')// [ '3', '+', '4' ]
function tokenize(TOKEN_REGEX, str) {
 let result = [];
 let match;
 while (match = TOKEN_REGEX.exec(str)) {
  result.push(match[1]);
 }
 return result;
}

上面代码中,如果字符串里面没有非法字符,y修饰符与g修饰符的提取结果是一样的。但是,一旦出现非法字符,两者的行为就不一样了

tokenize(TOKEN_Y, '3x + 4')
// [ '3' ]
tokenize(TOKEN_G, '3x + 4')
// [ '3', '+', '4' ]

上面代码中,g修饰符会忽略非法字符,而y修饰符不会,这样就很容易发现错误

【检测支持】

y修饰符与u修饰符类似,它也是一个语法层面的变更,尝试在不兼容 ES6 的 JS 引擎中使用它会抛出语法错误。如果要检测当前引擎是否支持y修饰符,可以通过以下函数来检测

function hasRegExpY() {
  try {
    var pattern = new RegExp(".", "y");
    return true;
  } catch (ex) {
    return false;
  }
}

这个函数使用了RegExp构造函数并传入字符串'y'作为参数,该语法即使在旧版 JS 引擎中也是有效的。但是,如果当前引擎不支持y修饰符则会抛出错误

总结

以上所述是小编给大家介绍的ES6正则表达式扩展笔记,希望对大家有所帮助,如果大家有任何疑问请给我留

言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
js实现飞入星星特效代码
Oct 17 Javascript
js实现网页标题栏闪烁提示效果实例分析
Nov 20 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
JavaScript实现对下拉列表值进行排序的方法
Jul 15 Javascript
jquery通过name属性取值的简单实现方法
Jun 20 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
浅谈JavaScript的innerWidth与innerHeight
Oct 12 Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 Javascript
简单实现js拖拽效果
Jul 25 #Javascript
Vue实现一个返回顶部backToTop组件
Jul 25 #Javascript
基于jquery实现多级菜单效果
Jul 25 #jQuery
关于TypeScript中import JSON的正确姿势详解
Jul 25 #Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 #Javascript
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 #Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 #Javascript
You might like
PHP Undefined index报错的修复方法
2011/07/17 PHP
在laravel框架中使用model层的方法
2019/10/08 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
jquery怎样实现ajax联动框(一)
2013/03/08 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
解决option标签selected="selected"属性失效的问题
2017/11/06 Javascript
JavaScript静态作用域和动态作用域实例详解
2019/06/17 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
2019/10/16 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
django框架forms组件用法实例详解
2019/12/10 Python
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
VSCode 自定义html5模板的实现
2019/12/05 HTML / CSS
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
Lookfantastic澳大利亚官网:英国知名美妆购物网站
2021/01/07 全球购物
10条PHP编程习惯
2014/05/26 面试题
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
初一地理教学反思
2014/01/16 职场文书
公司门卫的岗位职责
2014/02/19 职场文书
淘宝客服专员岗位职责
2014/04/11 职场文书
青春励志演讲稿
2014/04/29 职场文书
市场营销调查计划书
2014/05/02 职场文书
服装发布会策划方案
2014/05/22 职场文书
中国梦口号
2014/06/13 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android