正则的扩展----ES6重刷05

最新推荐文章于 2021-03-13 10:39:30 发布

燃情雪

最新推荐文章于 2021-03-13 10:39:30 发布

阅读量207

点赞数

分类专栏： ES6

本文链接：https://blog.csdn.net/h1234561234561/article/details/102291225

版权

ES6 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

在此之前，这里是我对正则的二次理解，虽记录随意，但句句都经本人code验证。
在此对ES6此书的正则的扩展，还未全面理解，虽说是二刷，但在第八小点dotAll模式之后便不甚理解，待之后境界进一步提升之后，再摸索摸索。

1、RegExp构造函数
此小点本人理解为主要讲的是ES6对ES5的容错兼容处理【在此引用例子便借于书上】

ES5时的RegExp的构造函数

var regex = new RegExp('xyz', 'i'); // 第一种方式正常
// 等价于
var regex = /xyz/i;

var regex = new RegExp(/xyz/i); // 第二种方式同样正常
// 等价于
var regex = /xyz/i;

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

E6关于RegExp构造函数的向后容错机制

var regex = new RegExp(/xyz/g, 'i'); // 正常
// 此时它会将第二个参数覆盖第一个参数的修饰符

2、字符串的正则方法
只是说明在ES6中将String.prototype.match()等四种方法与RegExp.prototype[Symbol.match]等实例方法绑定【在此我就对其四种方法做个简单的说明，具体详见MDN】

String.prototype.match() 返回值为null或则Array【不会改变原字符串】
第一种情况：当有修饰符g时，无匹配字符串返回null，有匹配字符串返回由所匹配字符串所构成的字符串数组

   const str = '123sdfb_4634bsjdvb_5274gvd'
   const reg = /\d+([a-z]*)/g
   const result = str.match(reg)
   console.log(result) // ["123sdfb", "4634bsjdvb", "5274gvd"]

第二种情况：当无修饰符g时，无匹配字符串返回null，有匹配字符串返回类似RegExp.prototype.exec()返回结构的字符串数组

   const str = 'sdfsdf123sdfb_4634bsjdvb_5274gvd'
   const reg = /\d+(?<letter>[a-z]*)/
   const result = str.match(reg)
   console.log(result) // ["123sdfb", "sdfb", index: 0, input: "123sdfb_4634bsjdvb_5274gvd", groups: {…}]

注意：返回数组内容解析为
第一个元素为正则全部匹配的字符串
第二个至第n个元素为n - 1个捕获组所捕获内容
第n + 1个元素为index为索引，值为正则全部匹配的字符串在原字符串的最开始位置
第n + 2个元素为input为索引，值为原字符串
第n + 3个元素为groups为索引，值为所有已命名捕获组所捕获的内容，以键值对形式展出
捕获组命名： (?<name>code……)

String.prototype.replace(arg1, arg2) 返回值为替换后新的字符串【不会改变原字符串】
第一种：arg1为固定死的具体string值，如’arg1’；arg2为固定死的具体string值，如’arg2’

  const str = 'arg1234arg1567arg1'
  const result = str.replace('arg1', 'arg2')
  console.log(result) // arg2234arg1567arg1
  console.log(str) // arg1234arg1567arg1

注意：只会替换第一个匹配到的字符串

第二种：arg1为正则，如/\d+(?<letter>[a-z]*)/g；arg2为固定死的具体string值，如’burningSnow’

   const str = '123sdfb_4634bsjdvb_5274gvd'
   const reg = /\d+(?<letter>[a-z]*)/g
   const result = str.replace(reg, 'burningSnow')
   console.log(result) // burningSnow_burningSnow_burningSnow
   console.log(str) // 123sdfb_4634bsjdvb_5274gvd

第三种：arg1为正则，如/\d+(?<letter>[a-z]*)/g；arg2为function

   const str = '123sdfb_4634bsjdvb_5274gvd'
   const reg = /\d+(?<letter>[a-z]*)/g
   const result = str.replace(reg, item => {
     // item为reg所匹配的子字符串
     const result = item.match(/[1-3]+/g) ? item.replace(/[1-3]+/g, '') : item
     return result
   })
   console.log(result) // sdfb_464bsjdvb_574gvd
   console.log(str) // 123sdfb_4634bsjdvb_5274gvd

注意：每次匹配后所触发的回调函数的参数为此次正则匹配的子字符串

String.prototype.search(searchValue) 返回searchValue在字符串中首次匹配项的索引;否则，返回 -1。
第一种：searchValue为字符串

   const reg = /\d+(?<letter>[a-z]*)/g
    const str = '123sdfb_4634bsjdvb_5274gvd'
   const result = str.search('23')
   console.log(result) // 1
   console.log(str) // 123sdfb_4634bsjdvb_5274gvd

第二种：searchValue为正则

    const str = '123sdfb_4634bsjdvb_5274gvd'
    const reg = /\d+(?<letter>[a-z]*)/g
    const result = str.search(reg)
    console.log(result) // 0
    console.log(str) // 123sdfb_4634bsjdvb_5274gvd

String.prototype.split(arg) 返回值为[""]或则是被arg所匹配的字符串截断的子字符串
第一种：arg为string

const str = '123sdfb_4634bsjdvb_5274gvd'
const result = str.split('_')
console.log(result) // ["123sdfb", "4634bsjdvb", "5274gvd"]
console.log(str) // 123sdfb_4634bsjdvb_5274gvd

第二种：arg为reg正则

let str = '123sdfb_4634bsjdvb_5274gvd'
str += str.endsWith('_') ? '' : '_' // 补全位置，至于为什么不用.concat是因为性能影响
const reg = /[a-z]_/g
const result = str.split(reg)
console.log(result) // ["123sdf", "4634bsjdv", "5274gv", ""]
console.log(str) // 123sdfb_4634bsjdvb_5274gvd_

3、u修饰符
此点本人个人理解为总的来说解决了码点大于\uffff的unicode编码和构建了对于未定义转义的字符的非法转义的报错机制

一、解决码点大于\uffff
首先“?”字码点为\ud842\udfb7

const reg = /^\ud842/g
const result = reg.test('?') // true
const reg = /^\ud842/gu
const result = reg.test('?') // false

不同原有：
当没有加u修饰符时，会将’?'认为两个汉字，unicode码值分别为\ud842、\udfb7，所以结果为true；当添加u修饰符时，就会识别\ud842\udfb7为一个汉字，所以结果为false

二、构建了对于未定义转义的字符的非法转义的报错机制
未加u修饰符

const str = '123sdf,b_4634bsjdv,b_5274gv,d_'
const reg = /\,[a-z]_/g
const result = str.split(reg)
console.log(result) // ["123sdf", "4634bsjdv", "5274gv", ""]

注意：并没有报错，只是符号“,”转义失败

添加u修饰符

const str = '123sdf,b_4634bsjdv,b_5274gv,d_'
const reg = /\,[a-z]_/gu
const result = str.split(reg)
console.log(result)
// topAtrribute.html:15 Uncaught SyntaxError: Invalid regular expression: /\,[a-z]_/: Invalid escape

注意：提供了良好的报错机制

4、RegExp.prototype.unicode属性
判定正则实例对象是否存在u修饰符

const r1 = /hello/;
const r2 = /hello/u;

r1.unicode // false
r2.unicode // true

5、y修饰符
个人理解为，匹配的字符串需是相互连接型
一，不加y修饰符

const str = '123_uuu123_ggg123_'
const reg = /\d+_/g
const result = str.match(reg)
console.log(result) // ["123_", "123_", "123_"]

二，加y修饰符

const str1 = '123_uuu123_ggg123_'
const str2 = '123_123_123_'
const reg = /\d+_/gy
const result1 = str1.match(reg)
const result2 = str2.match(reg)
console.log(result1) // ["123_"]
console.log(result2) // ["123_", "123_", "123_"]