本文详解JavaScript中实现数据脱敏的三种常用方法：利用slice截取、substring截取以及正则表达式替换。通过具体代码示例展示如何对手机号、身份证等敏感信息进行掩码处理，并提供一个封装函数以支持多种数据类型和自定义保留位数的配置，帮助开发者快速实现隐私保护功能。
一、前言
在Web开发中，保护用户隐私至关重要。通过运用字符串操作技巧，特别是正则表达式，我们可以对手机号和身份证号等敏感信息进行星号替换，从而有效实现数据隐私保护。
二、解决方式
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数据脱敏内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！