HTML怎么做手机号脱敏_html手机号中间四位脱敏方法【经验分享】-html教程-PHP中文网

HTML本身不能做手机号脱敏，真正有效的是服务端输出前处理或前端JS渲染时实时替换；需先清洗非数字字符、校验长度，再分段替换，且必须在数据绑定前完成，避免明文暴露。

html怎么做手机号脱敏_html手机号中间四位脱敏方法【经验分享】

HTML 本身不能做手机号脱敏，所有试图在纯 HTML 标签里“加个属性”或“写个注释”就声称脱敏的做法，都是无效的。真正起作用的只有服务端输出前处理，或前端 JS 渲染时实时替换。

为什么直接在 HTML 里写 `138****1234` 不算脱敏

这种写法只是把脱敏结果硬编码进源码，意味着：原始数据根本没出现过，也谈不上“脱敏”；更关键的是，它无法响应不同权限、不同场景的动态策略（比如客服看前3后4，实习生只能看前3后2）。一旦业务规则变，就得改 HTML 模板，维护成本高，还容易漏改。

常见错误现象包括：

在 Vue/React 模板里写死 {{ user.phone | maskPhone }}，但 maskPhone 过滤器没做空值/长度校验，遇到 null 或 "138" 就报错或拼出 138****
用 innerHTML 插入含明文手机号的字符串，再用 querySelectorAll("td.phone") 遍历替换——页面会先闪一下完整号码
正则写成 /^1[3-9]\d{9}$/ 去匹配，但用户输入的是 138-0013-8000 或 +86 13800138000，直接不匹配，脱敏失效

`phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")` 的坑与修正

这行代码看着简洁，但上线后常出问题。核心问题是：它假设输入一定是 11 位纯数字，且结构规整。现实中远非如此。

安全做法是先清洗、再校验、最后替换：

用 phone.replace(/\D/g, "") 去掉所有非数字字符（空格、横杠、+、括号等）
检查清洗后长度是否为 11，不是就直接返回原值（不强行脱敏）
再用 substr_replace（PHP）或 slice + 字符串拼接（JS）做替换，避免正则捕获失败时返回空或异常
如果要兼容固话（如 010-12345678），得单独判断清洗后长度是否为 10 或 11，分支处理

JS 示例（带防护）：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

function maskPhone(phone) {
  if (!phone || typeof phone !== 'string') return phone;
  const clean = phone.replace(/\D/g, '');
  if (clean.length !== 11) return phone;
  return clean.slice(0, 3) + '****' + clean.slice(7);
}