CSS HighLight API隐藏部分手机号码实例页面

效果：

如有疑问可以WX加13208033621或者15812345678咨询。

代码：

CSS代码：

::highlight(tel-highlight) {
  background-color: currentColor;
}

HTML代码：

<p id="p">如有疑问可以WX加13208033621或者15812345678咨询。</p>

JS代码：

// 文本字符内容
const str = p.textContent;
// 手机号起始索引值
const arrIndex = str.match(/1\d{10}/g).map(tel => str.indexOf(tel));
// 创建range数组
const arrRange = arrIndex.map(start => {
  const range = new Range();
  range.setStart(p.firstChild, start + 3);
  range.setEnd(p.firstChild, start + 7);
  
  return range;
});

// 定义高亮
const highlight = new Highlight(...arrRange.flat());
// 注册高亮
CSS.highlights.set("tel-highlight", highlight);