ES6正则表达式扩展

前面的话

  正则表达式是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修饰符则会抛出错误

 

时间: 2024-10-21 01:09:30

ES6正则表达式扩展的相关文章

ES6函数扩展

前面的话 函数是所有编程语言的重要组成部分,在ES6出现前,JS的函数语法一直没有太大的变化,从而遗留了很多问题和的做法,导致实现一些基本的功能经常要编写很多代码.ES6大力度地更新了函数特性,在ES5的基础上进行了许多改进,使用JS编程可以更少出错,同时也更加灵活.本文将详细介绍ES6函数扩展 形参默认值 Javascript函数有一个特别的地方,无论在函数定义中声明了多少形参,都可以传入任意数量的参数,也可以在定义函数时添加针对参数数量的处理逻辑,当已定义的形参无对应的传入参数时为其指定一个

ES6数组扩展

前面的话 数组是一种基础的JS对象,随着时间推进,JS中的其他部分一直在演进,而直到ES5标准才为数组对象引入一些新方法来简化使用.ES6标准继续改进数组,添加了很多新功能.本文将详细介绍ES6数组扩展 创建数组 在ES6以前,创建数组的方式主要有两种,一种是调用Array构造函数,另一种是用数组字面量语法,这两种方法均需列举数组中的元素,功能非常受限.如果想将一个类数组对象(具有数值型索引和length属性的对象)转换为数组,可选的方法也十分有限,经常需要编写额外的代码.为了进一步简化JS数组

ES6对象扩展

前面的话 随着JS应用复杂度的不断增加,开发者在程序中使用对象的数量也在持续增长,因此对象使用效率的提升就变得至关重要.ES6通过多种方式来加强对象的使用,通过简单的语法扩展,提供更多操作对象及与对象交互的方法.本章将详细介绍ES6对象扩展 对象类别 在浏览器这样的执行环境中,对象没有统一的标准,在标准中又使用不同的术语描述对象,ES6规范清晰定义了每一个类别的对象,对象的类别如下 1.普通(Ordinary)对象 具有JS对象所有的默认内部行为 2.特异(Exotic)对象 具有某些与默认行为

grep 使用整理 正则表达式 扩展正则表达式

名字 grep, egrep, fgerp 解释: grep是一个最初用于Unix操作系统的命令行工具. 在给出文件列表或标准输入后, grep会对匹配一个或多个正则表达式的文本进行搜索, 并只输出匹配(或者不匹配)的行或文本. 用法: grep [option] 'PATTERN' file ... --color=auto           常用选项[option]:                -v : 反向匹配, 显示不能被模式匹配到的行.                -o : 只

ES6 - 数组扩展(扩展运算符)

扩展运算符 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算(函数),将一个数组转为用逗号分隔的参数序列. rest: 变量将多余的参数放入数组中. spread(扩展):rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. 总结:二者为逆操作. console.log(...[1, 2, 3]) // 1 2 3 该运算符主要用于函数调用. /** * 1.该运算符将一个数组,变为参数序列. */ function add(x, ...y) { // x =

ES6数组扩展运算符和字符串遍历的新方法!!!

该方法主要是让我们在学习和工作中能够更加方便的去操作数据,数组和字符串! 下面开始代码展示阶段: 1.扩展运算符 console.log(...[1,2,3]) //以上结果输出:1,2,3 console.log(1,...[2,3,4],5) //以上结果输出:1,2,3,4,5 可以看出我在数组的前面使用了三个点,这个方法就是ES6的扩展运算符,它能够把数组给解析出来,让数组变成数值 更方便的拿到数据! console.log([...[],1]) //以上输出:[1] 但是扩展运算符后面

ES6知识点整理之----正则表达式扩展

1.如果RegExp构造函数第一个参数是一个正则对象,那么可以使用第二个参数指定修饰符.而且,返回的正则表达式会忽略原有的正则表达式的修饰符,只使用新指定的修饰符. new RegExp(/abc/ig, 'i').flags // "i" 2.字符串对象共有 4 个方法,可以使用正则表达式:match().replace().search()和split().ES6 将这 4 个方法,在语言内部全部调用RegExp的实例方法,从而做到所有与正则相关的方法,全都定义在RegExp对象上

ES6字符串扩展

前面的话 字符串是编程中重要的数据类型,只有熟练掌握字符串操作才能更高效地开发程序.JS字符串的特性总是落后于其它语言,例如,直到 ES5 中字符串才获得了 trim() 方法.而 ES6 则继续添加新功能以扩展 JS 解析字符串的能力.本文将详细介绍ES6中字符串扩展 子串识别 自从 JS 引入了 indexOf() 方法,开发者们就使用它来识别字符串是否存在于其它字符串中.ES6 包含了以下三个方法来满足这类需求:includes().startsWith().endsWith() [inc

Linux正则表达式——扩展篇

一.扩展正则表达式 正则表达式的字符串表示方式依照不同的严谨程度而分为基础正则表达式和扩展正则表达式.扩展正则表达式除了一些简单的一组字符串处理之外,还可以做组的字符串处理. 二.区别与基础正则表达式的元字符 1.次数匹配 +  匹配前面的字符至少一次 {m} 匹配m次 {m,n} 至少m次,至多n次 {m,} 至少m次 {0,n} 至多n次 2.分组 () 分组 | 或者  例如:ac|bc  即ab或者bc 三.egrep egrp 相当于grep -E 使用扩展正则表达式来构建模式 四.扩