手机号脱敏显示

function getConcealMobile(mobile) {
  if (!!mobile) {
    return mobile.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2");
  }
}

在前端实现手机号脱敏处理,可以通过多种方式完成,包括使用 JavaScript 正则表达式、Vue 过滤器、或使用现成的 UI 组件库功能。以下是几种常见的实现方法: ### 使用 JavaScript 正则表达式进行脱敏 通过正则表达式,可以将手机号中间的四位替换为 `****`,以实现脱敏效果: ```javascript let mobile = "13588888888"; let reg = /^(1[3-9][0-9])\d{4}(\d{4}$)/; let hiddenMobile = mobile.replace(reg, "$1****$2"); console.log(hiddenMobile); // 输出:135****8888 ``` 该方法通过正则表达式匹配手机号格式,并使用分组替换的方式将中间四位替换为星号[^1]。 ### 使用 Vue 过滤器实现脱敏 在 Vue 项目中,可以通过定义局部过滤器来实现手机号脱敏显示: ```javascript filters: { // 手机号脱敏 formatPhone: function (num) { if (num) { return num.replace(/^(.{3})(?:\d+)(.{2})$/, "$1********$2"); } } } ``` 在模板中使用方式如下: ```html <span>手机号:{{ item.phone | formatPhone }}</span> ``` 该方法适用于 Vue 2 项目,能够将手机号前三位和后两位保留,中间部分用星号替代[^2]。 ### 使用通用 JavaScript 函数处理 也可以编写一个通用函数来处理手机号脱敏,适用于任意前端框架或原生 JavaScript 项目: ```javascript function maskPhone(phone) { return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'); } console.log(maskPhone("13588888888")); // 输出:135****8888 ``` 此函数适用于格式为 11 位的手机号,通过正则表达式提取前三位和后四位,并在中间插入星号[^3]。 ### 使用 UI 组件库实现脱敏 部分 UI 组件库(如 uView)提供了内置的脱敏功能,例如通过 `uv-text` 组件设置 `mode="phone"` 和 `format="encrypt"` 属性即可实现脱敏显示: ```html <uv-text mode="phone" format="encrypt" text="12345678945"></uv-text> ``` 该方法适用于已经引入相关 UI 框架的项目,能够快速实现脱敏效果[^4]。 ### 注意事项 尽管前端脱敏在展示层面上能提升用户体验,但其并不能保证数据的真正安全性。前端数据仍可能被恶意脚本读取,因此为了确保数据安全,应在后端进行脱敏处理,并在传输过程中使用 HTTPS 加密。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值