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

数据统计模块

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

数据内容

1
<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 去除前后多余的内容即可获取到正常的内容数字

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

完整代码

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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));
});
}
});

如有错误, 欢迎指正。😶‍🌫️