Safari浏览器兼容正则表达式零宽断言

安知鱼2022-10-192023-08-01

最近在做关于界面的数据统计模块过程中要使用到正则表达式匹配 span 元素开头 和 p 标签结尾的字符

数据统计模块

于是开心的下了如下正则表达式匹配这串数据

数据内容

<p>网站数据概况</p><p><span>0</span><span>4</span></p><p><span>1</span><span>33</span></p><p><span>2</span><span>95</span></p><p><span>3</span><span>103</span></p><p><span>4</span><span>269</span></p><p><span>5</span><span>5523</span></p><p><span>6</span><span>7601</span></p>

正则匹配

1	let num = data.match(/(?<=<\/span><span>).*?(?=<\/span><\/p>)/g);

谷歌浏览器表现完美, 然而一到 Safari 浏览器里面就 g 了, 然后查了一下兼容性发现 Safari 居然不支持零宽断言

即不支持使用如?<= 或 ?=, 这么一来就难受了哇.

随即我立马去除了零宽断言转而使用了替换的方法来使 Safari 兼容

先使用普通正则匹配

1	let num = data.match(/(<\/span><span>).*?(\/span><\/p>)/g);

匹配出来的为 </span><span>4</span></p> 这种字符串

正则匹配

然后再使用 map ➕ replace 去除前后多余的内容即可获取到正常的内容数字

num = num.map(el => {
  let val = el.replace(/(<\/span><span>)/g, "");
  let str = val.replace(/(<\/span><\/p>)/g, "");
  return str;
});

完整代码

注意以下代码的掩码 ID 是 51LA 统计代码中普通安装中的动态掩码 id 值

fetch("https://v6-widget.51.la/v6/{动态掩码ID}/quote.js")
  .then(res => res.text())
  .then(data => {
    let title = ["最近活跃", "今日人数", "今日访问", "昨日人数", "昨日访问", "本月访问", "总访问量"];
    // let num = data.match(/(?<=<\/span><span>).*?(?=<\/span><\/p>)/g)
    let num = data.match(/(<\/span><span>).*?(\/span><\/p>)/g);

    num = num.map(el => {
      let val = el.replace(/(<\/span><span>)/g, "");
      let str = val.replace(/(<\/span><\/p>)/g, "");
      return str;
    });

    let s = document.getElementById("statistic");

    // 自定义不显示哪个或者显示哪个，如下为不显示 最近活跃访客 和 总访问量
    let statistic = [];
    for (let i = 0; i < num.length; i++) {
      if (i == 0 || i == num.length - 1) continue;
      s.innerHTML += "<div><span>" + title[i] + "</span><span id=" + title[i] + ">" + num[i] + "</span></div>";
      queueMicrotask(() => {
        statistic.push(new CountUp(title[i], 0, num[i], 0, 2, CountUpOptions));
      });
    }
  });