ES9_正则扩展_正则表达式_命名捕获分组_反向断言_dotAll 模式

ES9_新特性_正则扩展:命名捕获分组

正则扩展:命名捕获分组,声明一个字符串 需求:提取url和标签内文本

let str = '<a href="https://www.fujuhao.com">fujuhao</a>';

• ES9 之前的写法

const reg = /<a href="(.*)">(.*)<\/a>/;

// 执行
const result = reg.exec(str);
console.log(result);
// 打印结果: ['<a href="https://www.fujuhao.com">fujuhao</a>', 'https://www.fujuhao.com', 'fujuhao', index: 0, input: '<a href="https://www.fujuhao.com">fujuhao</a>', groups: undefined]
// 结果是一个数组，第一个元素是所匹配的所有字符串
// 第二个元素是第一个(.*)匹配到的字符串
// 第三个元素是第二个(.*)匹配到的字符串

// 我们将此称之为捕获
console.log(result[1]); // https://www.fujuhao.com
console.log(result[2]); // fujuhao

• ES9中写法: 命名捕获分组

const reg1 = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;
const result1 = reg1.exec(str);
console.log(result1);
// 打印结果: ['<a href="https://www.fujuhao.com">fujuhao</a>', 'https://www.fujuhao.com', 'fujuhao', index: 0, input: '<a href="https://www.fujuhao.com">fujuhao</a>', groups: {…}]

// 这里的结果多了一个groups
// groups:
// text:"fujuhao"
// url:"https://www.fujuhao.com"
console.log(result1.groups.url); // https://www.fujuhao.com
console.log(result1.groups.text); // fujuhao

ES9_新特性_正则扩展:反向断言

ES9 支持反向断言，通过对匹配结果前面的内容进行判断，对匹配进行筛选;

// 正则扩展:反向断言
// 字符串
let str = "JS5201314你知道么555啦啦啦";
// 需求:我们只想匹配到555

// 正向断言
const reg = /\d+(?=啦)/; // 前面是数字后面是啦 
const result = reg.exec(str);
console.log(result); // ['555', index: 13, input: 'JS5201314你知道么555啦啦啦', groups: undefined]

// 反向断言
const reg1 = /(?<=么)\d+/; // 后面是数字前面是么
const result1 = reg.exec(str);
console.log(result1); // ['555', index: 13, input: 'JS5201314你知道么555啦啦啦', groups: undefined]

ES9_新特性_正则扩展:dotAll 模式

ES9中正则表达式中点.匹配除回车外的任何单字符，标记『s』改变这种行为，允许行终止符出现;

// 正则扩展:dotAll 模式
// dot就是. 元字符，表示除换行符之外的任意单个字符 
let str = `
<ul>
    <li>
        <a>name</a>
        <p>https://www.fujuhao.com</p>
    </li>
    <li>
        <a>name</a>
        <p>https://www.fujieb.com</p>
    </li>
</ul> `;

// 需求:我们想要将其中的名称和对应url提取出来，存到对象

// 之前的写法
// const reg = /<li>\s+<a>(.*?)<\/a>\s+<p>(.*?)<\/p>/;

// ES9中 dotAll 模式
const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs; 
// const result = reg.exec(str);
// console.log(result);

let result;
let data = [];
while(result=reg.exec(str)){
    // console.log(result);
    data.push({title:result[1],time:result[2]});
}
console.log(data);
// 打印：
[
0: {title: 'name', time: 'https://www.fujuhao.com'}
1: {title: 'name', time: 'https://www.fujieb.com'}
]