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

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

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

手机号脱敏通常生存前三位和后四位，中央四位用星号更换。通过正则表达式匹配手机号的布局，并使用分组捕捉前三位和后四位，中央四位更换为星号。

2. phoneHide(phone) {
3.         let reg = /^(1[3-9][0-9])\d{4}(\d{4}$)/; // 定义手机号正则表达式
4.         phone = phone.replace(reg, '$1****$2');
5.         return phone;
6. }

复制代码

使用正则表达式对手机号举行脱敏 
二、身份证号

对身份证号举行脱敏通常意味着生存身份证号的前几位和后几位，而将中央的部门更换为星号。

2. function desensitizeIDCard(idCard) {
3.   if (!idCard || idCard.length < 6) {
4.     console.error('请输入有效的身份证号码');
5.     return '';
6.   }
8.   // 中国大陆的身份证号码长度为18位
9.   const idLength = 18;
10.   // 保留前6位和后4位，中间替换为星号
11.   const prefix = idCard.substr(0, 6);
12.   const suffix = idCard.substr(idLength - 4);
13.   const middle = '*'.repeat(idLength - 10);
15.   return prefix + middle + suffix;
16. }
17. // 示例
18. console.log(desensitizeIDCard('123456199001010012')); // 输出: 123456*********0012

复制代码

三、姓名

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

2. function desensitizeName(name, options) {
3.   // 默认脱敏选项
4.   const defaultOptions = {
5.     showFirstLetter: true,  // 是否显示第一个字母
6.     starLength: 3           // 脱敏字符的长度
7.   };
9.   // 合并用户选项和默认选项
10.   const settings = {...defaultOptions, ...options};
12.   // 检查是否是中文姓名
13.   const isChineseName = /[\u4e00-\u9fa5]/.test(name);
15.   // 脱敏函数
16.   const desensitize = (str) => {
17.     const firstLetter = str[0];
18.     const restLength = str.length - 1;
19.     const stars = settings.showFirstLetter ? '*'.repeat(restLength) : '*'.repeat(str.length);
20.     return firstLetter + stars;
21.   };
23.   if (isChineseName) {
24.     // 假设中文姓名由两个或三个字组成
25.     return desensitize(name);
26.   } else {
27.     // 英文姓名可能由多个单词组成
28.     const parts = name.split(' ');
29.     const desensitizedParts = parts.map(part => desensitize(part));
30.     return desensitizedParts.join(' ');
31.   }
32. }
34. // 示例
35. console.log(desensitizeName('张三', { showFirstLetter: true, starLength: 2 })); // 输出: 张**
36. console.log(desensitizeName('李四', { showFirstLetter: false })); // 输出: ***
37. console.log(desensitizeName('John Doe', { showFirstLetter: true, starLength: 2 })); // 输出: J*** D**

复制代码

  此函数担当一个姓名字符串和一个选项对象。选项对象可以包罗两个属性：showFirstLetter决定是否表现姓名的第一个字母，starLength决定脱敏后表现的星号数目。函数会根据这些选项对中文或英文姓名举行脱敏处置处罚。
  请留意，这个函数假设中文姓名由两个或三个汉字构成，而英文姓名由空格分隔的多个单词构成。如果姓名布局更复杂，大概须要进一步定制函数以顺应差别的脱敏需求。
四、邮箱

对邮箱举行脱敏通常意味着生存邮箱的第一部门（即用户名部门）和域名部门，而将用户名的中央部门更换为星号（*）。

2. function desensitizeEmail(email) {
3.   if (!email || !email.includes('@')) {
4.     console.error('请输入有效的邮箱地址');
5.     return '';
6.   }
8.   // 分离邮箱的用户名部分和域名部分
9.   const [username, domain] = email.split('@');
10.   // 确定用户名部分脱敏后的长度，这里保留前后各2个字符
11.   const visibleLength = 2;
12.   // 如果用户名长度小于或等于保留长度，则不进行脱敏
13.   if (username.length <= visibleLength * 2) {
14.     return email;
15.   }
17.   // 脱敏用户名部分，中间用星号替换
18.   const visibleUsername = username.substring(0, visibleLength) + '*'.repeat(username.length - visibleLength * 2) + username.substring(username.length - visibleLength);
19.   // 重新组合脱敏后的邮箱
20.   return visibleUsername + '@' + domain;
21. }
23. // 示例
24. console.log(desensitizeEmail('[email protected]')); // 输出: e*****[email protected]
25. console.log(desensitizeEmail('[email protected]')); // 输出: u*****[email protected]
26. console.log(desensitizeEmail('[email protected]')); // 输出: t****[email protected]

复制代码

  此函数担当一个邮箱字符串作为参数，起首查抄输入是否有用（便是否包罗@符号）。然后，它将邮箱所在分割为用户名部门和域名部门。如果用户名部门的长度小于或便是生存长度（在这个例子中是前后各2个字符），则不会举行脱敏。否则，它将用户名的中央部门更换为星号。
  请留意，这个函数默认生存了前后各2个字符，但你可以根据须要调解visibleLength的值。别的，如果邮箱所在很短，函数会直接返回原邮箱所在，不举行脱敏。