加密,其实就是对字符串的处理,主要包括查找,截取,替换,当然我们还可以使用正则

前端数据是从后端拿到的,关于数据敏感的问题,可能在开发过程中经常遇到,我们也知道前端对数据的处理也都是表皮层,没法达到真正的安全目的。但,没办法,有时候我们还是要去做一些本不该做的事情来让某些东西看似合理。

1、手机号脱敏

const phone = "13031325689";
const str = phone.replace(/(\d{3})\d*(\d{4})/, '$1****$2')
console.log(str) // 130****5689

2、身份证号脱敏

const card = "512326199102115645";
const str1 = card.replace(/(\w{6})\w*(\w{4})/,'$1********$2'); 
console.log(str) // 512326********5645

$1,$2是表示的小括号里的内容;$1是第一个小括号里的 ,$2是第2个小括号里的 ,以此类推

例如手机号脱敏:

(\d{3}) = 130

(\d{4}) = 5689

3、ios浏览器兼容问题

之前用的正则表达式零宽断言来进行脱敏,导致页面打开空白

safari浏览器不支持正则表达式中携带零宽断言。如果在正则中携带零宽断言,会导致页面空白,并且控制台报错:

SyntaxError: Invalid regular expression: invalid group specifier name
或者

SyntaxError: Invalid regular expression: unrecognized character after (?

使用方式如下(目前只兼容安卓,safari也不支持):

// 正则替换 身份证号脱敏
let idCardNum = '512326199102115645';
idCardNum = idCardNum .replace(/(?<=\d{3})\d{12}(?=\d{2})/,"************")
console.log(idCardNum) // 512*************45
// 正则替换 手机号脱敏
let mobile = '13031325689';
mobile = mobile.replace(/(?<=\d{3})\d{5}(?=\d{2})/,"*****")
console.log(mobile) // 130*****89

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐