前端实现个人信息脱敏（手机号、身份证号、姓名、邮箱）示例

在现代前端开发中，用户数据的安全和隐私保护变得越来越重要。个人信息的脱敏处理是保护用户隐私的重要技术之一。本文将探讨如何在前端实现手机号、身份证号、姓名和邮箱的脱敏处理，并给出相应的代码示例。

什么是数据脱敏？

数据脱敏是指对敏感信息进行处理，防止信息泄露。脱敏后的数据在保持了一定可读性和可用性的前提下，不再透露用户的个人信息。例如，将手机号处理为138****1234，身份证号处理为123****7890等。

实现方法

下面我们将通过 JavaScript 实现手机号、身份证号、姓名和邮箱的脱敏处理。

1. 脱敏手机号

手机号通常由11位数字构成，我们可以展示前3位和后4位，中间用****替代。

function maskPhoneNumber(phoneNumber) {
    return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
}

// 示例
const phoneNumber = "13812341234";
console.log(maskPhoneNumber(phoneNumber)); // 输出: 138****1234

2. 脱敏身份证号

身份证号一般由18位数字和字母组成，我们可以展示前6位和后4位，中间用****替代。

function maskIDCard(idCard) {
    return idCard.replace(/(\d{6})\d{8}(\d{4})/, '$1****$2');
}

// 示例
const idCard = "123456789012345678";
console.log(maskIDCard(idCard)); // 输出: 123456****5678

3. 脱敏姓名

对于姓名，通常我们可以将姓氏保留，而名字用*代替。比如：“张三”可以处理为“张*”。

function maskName(name) {
    if (name.length === 2) {
        return name.charAt(0) + '*';
    } else if (name.length > 2) {
        return name.charAt(0) + '*'.repeat(name.length - 1);
    }
    return name; // 若长度小于2则不处理
}

// 示例
const name = "张三";
console.log(maskName(name)); // 输出: 张*

4. 脱敏邮箱

邮箱通常可显示前三个字符和@及后缀，其他部分用****替代。

function maskEmail(email) {
    const [localPart, domain] = email.split('@');
    return localPart.length > 3 ? localPart.slice(0, 3) + '****@' + domain : '****@' + domain;
}

// 示例
const email = "example@gmail.com";
console.log(maskEmail(email)); // 输出: exa****@gmail.com

整合示例

将上述函数整合到一个简单的示例中，处理多个用户信息。

const userInfo = {
    phoneNumber: "13812341234",
    idCard: "123456789012345678",
    name: "张三",
    email: "example@gmail.com"
};

const maskedUserInfo = {
    maskedPhone: maskPhoneNumber(userInfo.phoneNumber),
    maskedID: maskIDCard(userInfo.idCard),
    maskedName: maskName(userInfo.name),
    maskedEmail: maskEmail(userInfo.email)
};

console.log(maskedUserInfo);
/*
输出:
{
    maskedPhone: '138****1234',
    maskedID: '123456****5678',
    maskedName: '张*',
    maskedEmail: 'exa****@gmail.com'
}
*/

总结

在保证用户个人信息隐私的前提下，前端脱敏处理是一项相对简单但非常重要的任务。通过对手机号、身份证号、姓名和邮箱等敏感信息进行脱敏，可以有效降低信息泄露的风险。在实际开发中，建议在后端同样配合实现数据脱敏，以确保数据在传输和存储过程中的安全性。