当前位置:首页 > JavaScript

js实现脱敏

2026-02-02 08:49:37JavaScript

实现脱敏的常见方法

使用正则表达式替换敏感信息 正则表达式可以快速匹配特定模式的字符串并进行替换。例如隐藏手机号中间四位:

const phone = '13812345678';
const desensitizedPhone = phone.replace(/(\d{3})\d{4}(\d{4})/, '$1$2');
// 输出: 1385678

处理身份证号 身份证号通常保留前6位和后4位,中间用星号代替:

const idCard = '110105199003072345';
const desensitizedId = idCard.replace(/(\d{6})\d{8}(\d{4})/, '$1$2');
// 输出: 1101052345

处理银行卡号 银行卡号一般显示前6位和后4位:

const bankCard = '6225880123456789';
const desensitizedCard = bankCard.replace(/(\d{6})\d{6}(\d{4})/, '$1$2');
// 输出: 6225886789

处理姓名 中文姓名通常保留姓氏,名字用星号代替:

const name = '张三';
const desensitizedName = name.replace(/([\u4e00-\u9fa5])[\u4e00-\u9fa5]/, '$1*');
// 输出: 张*

处理邮箱地址 邮箱可保留@符号前的第一个字符和最后一个字符:

const email = 'example@domain.com';
const desensitizedEmail = email.replace(/(.).*@(.*)/, '$1*@$2');
// 输出: e*@domain.com

封装通用脱敏函数

可以创建一个通用函数处理多种脱敏场景:

function desensitize(str, type) {
  switch(type) {
    case 'phone':
      return str.replace(/(\d{3})\d{4}(\d{4})/, '$1$2');
    case 'idCard':
      return str.replace(/(\d{6})\d{8}(\d{4})/, '$1$2');
    case 'bankCard':
      return str.replace(/(\d{6})\d{6}(\d{4})/, '$1$2');
    case 'name':
      return str.replace(/([\u4e00-\u9fa5])[\u4e00-\u9fa5]/, '$1*');
    case 'email':
      return str.replace(/(.).*@(.*)/, '$1*@$2');
    default:
      return str;
  }
}

注意事项

脱敏处理应考虑业务需求,不同场景可能需要不同的脱敏规则。敏感信息处理应遵循最小化原则,在满足业务需求的前提下尽可能减少敏感信息的暴露。

js实现脱敏

对于更复杂的需求,可以考虑使用第三方库如lodash的掩码功能,或者专门的数据脱敏库。在生产环境中,建议将脱敏逻辑放在服务端处理,避免在前端暴露原始数据。

标签: js
分享给朋友:

相关文章

js实现vue

js实现vue

Vue.js 简介 Vue.js 是一个渐进式 JavaScript 框架,用于构建用户界面。其核心库专注于视图层,易于与其他库或现有项目整合。 实现 Vue.js 的基本步骤 安装 Vue.j…

js实现瀑布流

js实现瀑布流

实现瀑布流布局 瀑布流布局是一种常见的网页布局方式,常用于图片展示、商品列表等场景。以下是使用 JavaScript 实现瀑布流布局的几种方法。 纯 JavaScript 实现 通过计算元素的位置和…

js实现百叶窗

js实现百叶窗

使用CSS和JavaScript实现百叶窗效果 通过CSS动画和JavaScript事件监听可以实现百叶窗效果。核心思路是将内容区域分割为多个条状元素,通过控制它们的展开/折叠状态来模拟百叶窗。…

js手势实现

js手势实现

手势识别实现方法 在JavaScript中实现手势识别通常涉及监听触摸事件(touchstart、touchmove、touchend)或鼠标事件(mousedown、mousemove、mouseu…

js画图实现

js画图实现

使用Canvas API绘制图形 Canvas是HTML5提供的绘图API,通过JavaScript操作Canvas元素可以绘制各种图形。以下是一个简单的示例: <canvas id="myC…

js实现的游戏

js实现的游戏

JavaScript 游戏开发基础 JavaScript 是开发网页游戏的流行选择,因其无需插件即可在浏览器中运行。以下是一些关键技术和资源: HTML5 Canvas Canvas 提供了绘制图形…