正则表达式的基础知识8持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第30天，点击查看活动详情

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第30天，点击查看活动详情

使用matchAll完成全局匹配

产品经理的需求如下，获取下面文档中的标签中的文案，结果是一个数组，

<body>
    <h1>shizebang.com</h1>
    <h2>shi.com</h2>
    <h1>石头</h1>
</body>

首先会想到用match，写个全局匹配的正则，但是这样会匹配标签加内容，不能只匹配内容，

 let reg = /<(h[1-6])>([\s\S]+?)<\/\1>/ig
    const body = document.body;
    const gen = body.innerHTML.match(reg);

可以使用matchAll方法，他会进行全局匹配，得到一个迭代器，然后使用for of遍历，每次获取到的是当次match的信息，第一位是原字符串，第二位是第一个分组，内容是第二个分组，所以下标为3

    let reg = /<(h[1-6])>([\s\S]+?)<\/\1>/i
    const body = document.body;
    const gen = body.innerHTML.matchAll(reg);
    let list=[];
    for(const iterator of gen){
        list.push(iterator[2])
    }
    console.log(list)

这样强制使用matchAll方法而已，其实使用replace方法更简单

    let reg = /<(h[1-6])>([\s\S]+?)<\/\1>/g
    const body = document.body;
    let list = [];
    const gen = body.innerHTML.replace(reg, (source, p1, p2) => {
        list.push(p2)
    });
    console.log(list)

还可以使用exec方法

    let reg = /<(h[1-6])>([\s\S]+?)<\/\1>/g
    const body = document.body;
    let list = [];
    while (res = reg.exec(body.innerHTML)) {
        list.push(res[2])
    }
    console.log(list);

利用$符替换

产品需求为，将（010）1234567这种电话的格式改为 010-1234567，然后有一整页的电话号码，可以使用下面的方法，利用原子组分组，将前三位括号括起来，后面的7到8位用括号括起来，然后在replace一替换，就可以使用 $1表示前三位，$ 2表示后面的号码。

    let shi = `
  (010)9999999 (020)8888888
  `
    let reg = /\((\d{3})\)(\d{7,8})/g
    shi=shi.replace(reg,'$1-$2');
    console.log(shi)

$& 就是匹配正则的原字符串

    let shi = `xxshixx`
    let reg = /shi/g
    shi = shi.replace(reg, '$&');
    console.log(shi)
    // xxshixx

$` 表示匹配到的字符串前面的字符串

    let shi = `ershixx`
    let reg = /shi/g
    shi = shi.replace(reg, '$`');
    console.log(shi)
    // 此处表示er 
    // 打印 ererxx

$' 表示匹配到的字符串后面的字符串实际例子，将前后添加一个--后缀匹配值前缀--

   let shi = `这个shi坏人`
    let reg = /(shi)/g
    shi = shi.replace(reg, "--$'$1$`--");
    console.log(shi)