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

在当今数字化时代，个人信息的安全与隐私保护已成为公众关注的焦点。本文将通过JavaScript代码示例，演示如何对手机号、身份证号、姓名、邮箱等个人数据进行脱敏处理。确保满足需求的同时保护用户的隐私。

一、手机号

手机号脱敏通常保留前三位和后四位，中间四位用星号替换。通过正则表达式匹配手机号的结构，并使用分组捕获前三位和后四位，中间四位替换为星号。

<code>phoneHide(phone) {

let reg = /^(1[3-9][0-9])\d{4}(\d{4}$)/; // 定义手机号正则表达式

phone = phone.replace(reg, '$1****$2');

return phone;

}

使用正则表达式对手机号进行脱敏 

二、身份证号

对身份证号进行脱敏通常意味着保留身份证号的前几位和后几位，而将中间的部分替换为星号。

function desensitizeIDCard(idCard) {

if (!idCard || idCard.length < 6) {

console.error('请输入有效的身份证号码');

return '';

}

// 中国大陆的身份证号码长度为18位

const idLength = 18;

// 保留前6位和后4位，中间替换为星号

const prefix = idCard.substr(0, 6);

const suffix = idCard.substr(idLength - 4);

const middle = '*'.repeat(idLength - 10);

return prefix + middle + suffix;

}

// 示例

console.log(desensitizeIDCard('123456199001010012')); // 输出: 123456*********0012

三、姓名

对姓名数据进行脱敏通常意味着将姓名的一部分替换为星号（*）或其他占位符，以保护个人隐私。

function desensitizeName(name, options) {

// 默认脱敏选项

const defaultOptions = {

showFirstLetter: true, // 是否显示第一个字母

starLength: 3 // 脱敏字符的长度

};

// 合并用户选项和默认选项

const settings = {...defaultOptions, ...options};

// 检查是否是中文姓名

const isChineseName = /[\u4e00-\u9fa5]/.test(name);

// 脱敏函数

const desensitize = (str) => {

const firstLetter = str[0];

const restLength = str.length - 1;

const stars = settings.showFirstLetter ? '*'.repeat(restLength) : '*'.repeat(str.length);

return firstLetter + stars;

};

if (isChineseName) {

// 假设中文姓名由两个或三个字组成

return desensitize(name);

} else {

// 英文姓名可能由多个单词组成

const parts = name.split(' ');

const desensitizedParts = parts.map(part => desensitize(part));

return desensitizedParts.join(' ');

}

}

// 示例

console.log(desensitizeName('张三', { showFirstLetter: true, starLength: 2 })); // 输出: 张**

console.log(desensitizeName('李四', { showFirstLetter: false })); // 输出: ***

console.log(desensitizeName('John Doe', { showFirstLetter: true, starLength: 2 })); // 输出: J*** D**

  此函数接受一个姓名字符串和一个选项对象。选项对象可以包含两个属性：showFirstLetter决定是否显示姓名的第一个字母，starLength决定脱敏后显示的星号数量。函数会根据这些选项对中文或英文姓名进行脱敏处理。

  请注意，这个函数假设中文姓名由两个或三个汉字组成，而英文姓名由空格分隔的多个单词组成。如果姓名结构更复杂，可能需要进一步定制函数以适应不同的脱敏需求。

四、邮箱

对邮箱进行脱敏通常意味着保留邮箱的第一部分（即用户名部分）和域名部分，而将用户名的中间部分替换为星号（*）。

function desensitizeEmail(email) {

if (!email || !email.includes('@')) {

console.error('请输入有效的邮箱地址');

return '';

}

// 分离邮箱的用户名部分和域名部分

const [username, domain] = email.split('@');

// 确定用户名部分脱敏后的长度，这里保留前后各2个字符

const visibleLength = 2;

// 如果用户名长度小于或等于保留长度，则不进行脱敏

if (username.length <= visibleLength * 2) {

return email;

}

// 脱敏用户名部分，中间用星号替换

const visibleUsername = username.substring(0, visibleLength) + '*'.repeat(username.length - visibleLength * 2) + username.substring(username.length - visibleLength);

// 重新组合脱敏后的邮箱

return visibleUsername + '@' + domain;

}

// 示例

console.log(desensitizeEmail('example@email.com')); // 输出: e*****m@email.com

console.log(desensitizeEmail('user123@domain.com')); // 输出: u*****3@domain.com

console.log(desensitizeEmail('test@website.org')); // 输出: t****e@website.org

  此函数接受一个邮箱字符串作为参数，首先检查输入是否有效（即是否包含@符号）。然后，它将邮箱地址分割为用户名部分和域名部分。如果用户名部分的长度小于或等于保留长度（在这个例子中是前后各2个字符），则不会进行脱敏。否则，它将用户名的中间部分替换为星号。

  请注意，这个函数默认保留了前后各2个字符，但你可以根据需要调整visibleLength的值。此外，如果邮箱地址很短，函数会直接返回原邮箱地址，不进行脱敏。