本文详细解析前端开发中常见的数据脱敏需求，涵盖手机号（前三后四）、邮箱、身份证号及姓名的处理逻辑。通过正则表达式与字符串替换方法，提供具体的JavaScript代码示例，帮助开发者有效保护用户隐私信息。
一：为何需要数据脱敏？
前端项目开发中，数据展示与渲染至关重要。通常直接获取后端接口数据，但涉及身份证号、手机号等隐私信息时，必须进行脱敏处理，例如采用前三后四格式或其他格式，以利于界面布局与信息保密。下文将介绍常见脱敏类型。
二：脱敏技术实现路径
实现脱敏主要依赖正则表达式与字符串 replace 替换技术。正则用于匹配需替换的目标数据，replace 则根据具体需求执行字符替换操作。
1.手机号脱敏（前三后四）
// 手机号做脱敏处理
function phoneHide(phone) {
let reg = /^(1[3-9][0-9])\d{4}(\d{4}$)/; // 定义手机号正则表达式
phone = phone.replace(reg, '$1****$2');
return phone; // 185****6696
}2.邮箱脱敏
function emailHide(email) {
var avg;
var splitted;
var email1;
var email2;
splitted = email.split('@');
email1 = splitted[0];
avg = email1.length / 2;
email1 = email1.substring(0, email1.length - avg);
email2 = splitted[1];
return email1 + '***@' + email2; // 输出为81226***@qq.com
}3.身份证号脱敏
function cardHide(card) {
const reg = /^(.{6})(?:\d+)(.{4})$/; // 匹配身份证号前6位和后4位的正则表达式
const maskedIdCard = card.replace(reg, '$1******$2'); // 身份证号脱敏，将中间8位替换为“*”
return maskedIdCard; // 输出：371782******5896
}4.姓名脱敏
function nameHide(name) {
if (name.length == 2) {
name = name.substring(0, 1) + '*'; // 截取name 字符串截取第一个字符，
return name; // 张三显示为张*
} else if (name.length == 3) {
name = name.substring(0, 1) + '*' + name.substring(2, 3); // 截取第一个和第三个字符
return name; // 李思思显示为李*思
} else if (name.length > 3) {
name = name.substring(0, 1) + '*' + '*' + name.substring(3, name.length); // 截取第一个和大于第4个字符
return name; // 王五哈哈显示为王**哈
}
}三：总结
脱敏是信息安全的关键手段，能有效防止敏感信息泄露。JavaScript 提供了多种基础脱敏方法。上述为常见方案，开发者可根据需求选用。尽管存在不同场景，但基于前述代码可编写适配自身逻辑的处理程序。
附前端js让手机号脱敏的其他几种方法
标题手机号脱敏方法有几种
// 方法一：使用substring()方法
let phoneNumberOne='19909091221';
let desensitizationOne=phoneNumberOne.substring(0,3)+' **** '+phoneNumberOne.substring(7);
// 方法二：使用substring()方法
let phoneNumberTwo='19909091221';
let desensitizationTwo=phoneNumberTwo.substr(0,3)+' **** '+phoneNumberTwo.substr(7);
// 方法三：使用正则表达式方法
let phoneNumberThree='19909091221';
let regular=/(\d{3})\d*(\d{4})/
let desensitizationThree=phoneNumberThree.replace(regular,'$1****$2');
//总结一下区别：
// substring第一个参数是开始下标，第二个是结束下标。
// substr第一个参数是开始下标，第二个是截取几位。
至此，关于JS实现手机号、邮箱、身份证号及姓名脱敏等常见示例的文章介绍完毕。如需了解更多JS常见脱敏手机号邮箱等内容，请搜索本站历史文章或浏览相关文章，感谢支持！