当前位置:首页 > JavaScript

js实现电话号码脱敏

2026-03-01 22:44:57JavaScript

电话号码脱敏的实现方法

在JavaScript中实现电话号码脱敏,主要目的是保护用户隐私,通常保留前几位和后几位数字,中间用星号或其他符号代替。以下是几种常见的实现方式:

正则表达式替换法

使用正则表达式可以高效地匹配和替换电话号码中的特定部分:

function maskPhoneNumber(phone) {
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1$2');
}
// 示例:13812345678 -> 1385678

字符串截取拼接法

js实现电话号码脱敏

对于固定格式的电话号码,可以直接截取和拼接字符串:

function maskPhoneNumber(phone) {
  const prefix = phone.substring(0, 3);
  const suffix = phone.substring(phone.length - 4);
  return `${prefix}${suffix}`;
}

国际化处理方案

考虑到不同国家的电话号码格式不同,可以增加更灵活的处理:

js实现电话号码脱敏

function maskPhoneNumber(phone, visibleDigits = 4) {
  const maskLength = phone.length - visibleDigits * 2;
  if (maskLength <= 0) return phone;

  const prefix = phone.substring(0, visibleDigits);
  const suffix = phone.substring(phone.length - visibleDigits);
  return prefix + '*'.repeat(maskLength) + suffix;
}
// 示例:maskPhoneNumber('+8613812345678', 3) -> +86*678

处理带区号的电话号码

对于包含区号的电话号码,可以先提取区号再处理:

function maskPhoneWithAreaCode(phone) {
  const parts = phone.split(/(?<=\d)\s+/);
  if (parts.length > 1) {
    return parts[0] + ' ' + maskPhoneNumber(parts[1]);
  }
  return maskPhoneNumber(phone);
}
// 示例:010 13812345678 -> 010 1385678

注意事项

  • 处理前应先验证电话号码格式的有效性
  • 国际号码需要考虑不同国家的号码长度和格式
  • 在显示时建议添加提示说明这是脱敏后的号码
  • 移动端显示需考虑不同屏幕尺寸下的展示效果

以上方法可以根据实际业务需求进行组合或调整,核心思想都是保留部分关键信息的同时隐藏敏感内容。

标签: 电话号码js
分享给朋友:

相关文章

js实现选题

js实现选题

实现选题功能的JavaScript方法 基础实现方案 使用数组存储选项,通过随机索引选取: const options = ['选项A', '选项B', '选项C', '选项D']; const r…

js图片上传实现

js图片上传实现

图片上传的基本实现 使用HTML的<input type="file">元素配合JavaScript的File API实现基础图片上传功能。HTML部分需要设置accept="image/…

js 实现递归

js 实现递归

递归的基本概念 递归是指函数直接或间接调用自身的过程。在JavaScript中,递归通常用于解决可以分解为相似子问题的问题,如阶乘、斐波那契数列、树形结构遍历等。 递归的实现要点 基线条件(Base…

js实现截图

js实现截图

使用HTML2Canvas库实现截图 HTML2Canvas是一个流行的JavaScript库,可以将网页元素或整个页面转换为Canvas图像。安装方式: npm install html2canv…

js实现div隐藏

js实现div隐藏

使用CSS的display属性隐藏div 通过设置元素的display属性为none,可以完全隐藏div元素。这种方法不仅隐藏元素,还会从文档流中移除,不占据页面空间。 document.getEl…

js实现点击隐藏

js实现点击隐藏

使用CSS类切换实现点击隐藏 通过添加或移除CSS类来控制元素的显示与隐藏。定义一个隐藏样式类如.hidden { display: none; },通过事件监听切换该类。 document.que…