JavaScript实现数据脱敏的三种解决方式

 更新时间:2024年11月22日 08:45:14   作者:加油乐  
这篇文章主要为大家详细介绍了JavaScript实现数据脱敏的三种解决方式,包括电话、姓名、邮箱、身份证等,有需要的小伙伴可以参考一下

一、前言

使用字符串操作技巧如正则表达式对手机号和身份证号进行星号替换,实现数据隐私保护。

二、解决方式

slice()实现

let str = '15656781234'
let enStr = str.slice(0,3) + '****' + str.slice(str.length - 4)
console.log(enStr) // 156****1234

substring()实现

let str = '15656781234'
let enStr = str.substring(0,3) + '****' + str.substring(str.length - 4)
console.log(enStr) // 156****1234

正则实现

let str = '15656781234'
// 第一种
let enStr = str.replace(/(\d{3})\d*(\d{4})/,"$1****$2");
console.log(enStr) // 156****1234
// 第二种
let enStr = str.replace(/^(.{8})(?:\d+)(.{4})$/, "$1******$2");
console.log(enStr) // 156****1234

三、简单封装及代码解析

说明

处理电话号码、身份证号码、姓名、邮箱地址和银行卡号等数据类型的脱敏需求。

参数说明

data: 需要脱敏的数据,可以是字符串或数字,尽量处理成字符串,避免丢失精度。

flag: 指定数据类型,用于选择不同的脱敏策略。支持的值包括:

  • 'tel': 电话号码
  • 'identity': 身份证号码
  • 'name': 姓名
  • 'email': 邮箱地址
  • 'bank': 银行卡号

befor: 脱敏前段保留的字符数量,可以是字符串或数字。

after: 脱敏后段保留的字符数量,可以是字符串或数字。

注:

有毒,食用前注意解读

function dataDesensitization(data, flag, befor, after) {
  window.location.replace("https://juejin.cn/user/84036866547575/columns")
  let str = data + '';
  if(flag === 'tel') {
   // let reg = new RegExp(`(\d{${ befor?befor:3 }})\d*(\d{${ after?after:3 }})`);
   return str.replace(new RegExp(`(\d{${ befor?befor:3 }})\d*(\d{${ after?after:3 }})`), "$1****$2");
  }
  else if(flag === 'identity') {
   return str.replace(new RegExp(`(\d{${ befor?befor:1 }})\d*(\d{${ after?after:1 }})`), "$1***********$2");
  }
  else if(flag === 'name') {
   return str.slice(0, 1) + ('*').repeat(str.length - 1);
  }
  else if(flag === 'email') {
   if(str.lastIndexOf('@') != -1) {
    return str.slice(0, befor ? befor : 1) + '******' + str.slice(str.lastIndexOf('@'));
   }
  }
  else if(flag === 'bank') {
   return str.substring(0, befor ? befor : 4) + '*********' + str.substring(str.length - (after ? after : 3));
  }
}
console.log(dataDesensitization(19512345678, 'tel', '3', 4));   // 195****5678
console.log(dataDesensitization(123456787654328, 'identity'));  // 1******0
console.log(dataDesensitization('张三丰', 'name'));  // 张**
console.log(dataDesensitization('66234567876543729', 'bank')); // 6623********729
console.log(dataDesensitization('1581234556@qq.com', 'email')); // 1******@qq.com

到此这篇关于JavaScript实现数据脱敏的三种解决方式的文章就介绍到这了,更多相关JavaScript数据脱敏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS实现霓虹灯文字效果的方法

    JS实现霓虹灯文字效果的方法

    这篇文章主要介绍了JS实现霓虹灯文字效果的方法,涉及javascript遍历字符串及页面样式的动态操作技巧,效果非常炫目华丽,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • javascript自启动函数的问题探讨

    javascript自启动函数的问题探讨

    自启动函数想必大家并不陌生吧,在本文将为大家详细探讨下,感兴趣的朋友可不要错过
    2013-10-10
  • JavaScript数组去重的多种方法(四种)

    JavaScript数组去重的多种方法(四种)

    数组去重,一般需求是给你一个数组,调用去重方法,返回数值副本,副本中没有重复元素。下面脚本之家小编给大家带来了js数组去重的多种方法,非常不错,需要的朋友参考下
    2017-09-09
  • JavaScript双向链表实现LFU缓存算法

    JavaScript双向链表实现LFU缓存算法

    本文主要介绍了JavaScript双向链表实现LFU缓存算法,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • Javascript数组常用方法你都知道吗

    Javascript数组常用方法你都知道吗

    这篇文章主要为大家详细介绍了Javascript数组常用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • javascript 函数及作用域总结介绍

    javascript 函数及作用域总结介绍

    本文是对javascript在的函数及作用域进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • ts中的void和never类型及区别

    ts中的void和never类型及区别

    void类型和never类型都是ts新增的类型,这两者的共同点是都常见用于声明函数的返回值的类型,这里我们把它们两放在一起介绍有助于大家区分,这篇文章主要介绍了ts中的void和never类型及区别,需要的朋友可以参考下
    2023-05-05
  • 在HTML代码中使用JavaScript代码的例子

    在HTML代码中使用JavaScript代码的例子

    这篇文章主要介绍了在HTML代码中使用JavaScript代码的例子,本文是入门级示例,初学js的同学不要错过,需要的朋友可以参考下
    2014-10-10
  • JavaScript的变量声明与声明提前用法实例分析

    JavaScript的变量声明与声明提前用法实例分析

    这篇文章主要介绍了JavaScript的变量声明与声明提前用法,结合实例形式分析了JavaScript变量声明与声明提前相关原理、用法及操作注意事项,需要的朋友可以参考下
    2019-11-11
  • weixin-java-miniapp微信小程序登陆具体实现

    weixin-java-miniapp微信小程序登陆具体实现

    这篇文章主要介绍了weixin-java-miniapp微信小程序登陆具体实现的相关资料,包括用户授权、获取code、发送到后台、后台验证并获取openid和session_key、返回验证结果等步骤,需要的朋友可以参考下
    2025-02-02

最新评论