前端实现个人信息脱敏(手机号、身份证号、姓名、邮箱)JavaScript代码示例

 更新时间:2025年02月10日 09:46:17   作者:年近古稀还要写代码  
这篇文章主要介绍了如何使用JavaScript对手机号、身份证号、姓名和邮箱等个人数据进行脱敏处理,以保护用户隐私,通过正则表达式和分组捕获,可以灵活地对不同类型的数据进行脱敏处理,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

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

一、手机号

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

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的值。此外,如果邮箱地址很短,函数会直接返回原邮箱地址,不进行脱敏。

总结

到此这篇关于前端实现个人信息脱敏(手机号、身份证号、姓名、邮箱)的文章就介绍到这了,更多相关前端个人信息脱敏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信小程序实现简单购物车功能

    微信小程序实现简单购物车功能

    这篇文章主要为大家详细介绍了微信小程序实现简单购物车功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • 使用JavaScript构建一个动态交互式图表

    使用JavaScript构建一个动态交互式图表

    在Web开发中,JavaScript不仅是实现交互效果的关键,还可以用于构建复杂的可视化组件,如动态交互式图表,下面我们就来看看如何构建一个动态交互式图表吧
    2024-02-02
  • bootstrapValidator bootstrap-select验证不可用的解决办法

    bootstrapValidator bootstrap-select验证不可用的解决办法

    这篇文章主要为大家详细介绍了bootStrapValidator和bootStrap-select验证不可用的解决办法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • Javascript递归打印Document层次关系实例分析

    Javascript递归打印Document层次关系实例分析

    这篇文章主要介绍了Javascript递归打印Document层次关系的方法,实例分析了javascript中Document的层次关系,需要的朋友可以参考下
    2015-05-05
  • web 前端常用组件之Layer弹出层组件

    web 前端常用组件之Layer弹出层组件

    这篇文章主要介绍了web 前端常用组件之Layer弹出层组件的相关资料,本文通过实例代码详解给大家介绍的非常详细,感兴趣的朋友可以参考下
    2016-09-09
  • ES6使用 Array.includes 处理多重条件用法实例分析

    ES6使用 Array.includes 处理多重条件用法实例分析

    这篇文章主要介绍了ES6使用 Array.includes 处理多重条件用法,结合实例形式分析了Array.includes基本功能、原理及处理多重条件相关操作技巧,需要的朋友可以参考下
    2020-03-03
  • 基于JS正则表达式实现模板数据动态渲染(实现思路详解)

    基于JS正则表达式实现模板数据动态渲染(实现思路详解)

    这篇文章主要介绍了基于JS正则表达式实现模板数据动态渲染 ,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • 一些手写JavaScript常用的函数汇总

    一些手写JavaScript常用的函数汇总

    这篇文章主要给大家介绍了一些手写的JavaScript常用的函数,文中通过示例代码介绍的非常详细,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-04-04
  • 浅谈js继承的实现及公有、私有、静态方法的书写

    浅谈js继承的实现及公有、私有、静态方法的书写

    下面小编就为大家带来一篇浅谈js继承的实现及公有、私有、静态方法的书写。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • JavaScript学习笔记之DOM基础 2.4

    JavaScript学习笔记之DOM基础 2.4

    DOM(Document Object Model),即“文档对象模型”。基于语义的逻辑结构,DOM将网页内的元素与内容呈现为一个清晰、易读的树状模型,下面小编把最近整理有关javascript笔记之DOM基础分享给大家,有需要的朋友可以参考下
    2015-08-08

最新评论