前端脱敏是防止敏感信息明文暴露的轻量方案，通过JS渲染前格式化实现；支持手机号、身份证、邮箱等固定格式正则脱敏，及姓名、银行卡等动态长度处理，并可封装为配置化通用函数或框架指令/Hook复用。
前端脱敏不是为了替代后端安全，而是防止敏感信息在页面上明文暴露。接口返回原始数据后，JavaScript 在渲染前做一次格式化处理，是最常见、最轻量的方案。
手机号、身份证号等固定格式字段的正则脱敏
这类数据结构稳定，用正则匹配+分组替换最直接高效。
- 手机号（11位）：保留前3位和后4位，中间4位替换成*，正则
/^(1[3-9]\d)\d{4}(\d{4})$/，替换为$1****$2 - 身份证号（18位）：保留前6位和后4位，中间10位替换成*，正则
/^(\d{6})\d{10}(\w{4})$/，替换为$1**********$2 - 邮箱：保留@前首字母和域名部分，如
test***@example.com，可用str.replace(/^(.)(.*?)(@.*)$/, '$1***$3')
姓名、银行卡号等长度不固定的灵活处理
不能硬写固定位数，需先判断长度再动态截取。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 姓名：2字名显示“张*”，3字及以上显示“李**”，可用
name.length === 2 ? name[0] + '*' : name[0] + '*'.repeat(name.length - 1) - 银行卡号：一般只保留前4位和后4位，中间全替换成*，先
str.length > 8再拼接str.slice(0, 4) + '*'.repeat(str.length - 8) + str.slice(-4) - 地址：若只需显示到区县，可按中文字符分割，取前3~5个汉字后加“…”
封装通用脱敏函数，支持配置化调用
避免每个地方重复写逻辑，统一收口更易维护。
立即学习“Java免费学习笔记（深入）”；
- 接受参数：
value（原始字符串）、type（如 'phone' / 'idcard' / 'name'）、options（可选：before=3, after=4, ch='*'） - 内部根据 type 自动设定默认值，比如
type === 'phone'时自动设before=3, after=4 - 对空值、非字符串类型做容错处理，返回原值或空字符串，不报错
结合 Vue/React 指令或 Hook 封装成可复用能力
在框架中进一步提升复用性，减少模板里写内联表达式。
- Vue 中可写一个
v-desensitize:type指令，绑定时自动执行对应脱敏逻辑 - React 中可封装
useDesensitize(value, type)Hook，在组件内调用并响应式更新 - 表格列渲染、表单预览、弹窗详情等高频场景，直接传参即可，逻辑与视图分离
