前端手机号、用户名、身份证号中间使用*代替，常用的脱敏法

手机号、用户名、身份证号中间使用*代替，常用的脱敏法"/>

前端手机号、用户名、身份证号中间使用*代替，常用的脱敏法

        在前端项目开发的时候，对于一些敏感信息，例如身份证号，手机号，用户名等等，是不希望他人看到的，那么常用的无非就是使用*代替中间的字符，这种方法就是脱敏法。

在这里我是开发的vue项目，其他项目同样适用。

如下图所示：

一、简单的写法（对于逻辑简单的）

1、手机号脱敏法： 

 直接在传过来的数据后面添加如下代码：（正则表达式）

.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2")

2、身份证号脱敏法：

 同手机号脱敏法一样使用正则

.replace(/^(.{6})(?:\d+)(.{2})$/, "$1**********$2") 

二、函数的写法（对于逻辑复杂的）

1、用户名的脱敏法：（对于用户名可能是两个字、三个字、四个字等等，需要判断）

在这里我用的是vue的 filters 过滤器，你也可以采取调用函数的方法。

 代码如下：

// 姓名隐藏过滤filters: {noPassByName (str) {if (null != str && str != undefined) {if (str.length == 2) {return str.substring(0, 1) + '*' //截取name 字符串截取第一个字符，} else if (str.length == 3) {return str.substring(0, 1) + "*" + str.substring(2, 3) //截取第一个和第三个字符} else if (str.length > 3) {return str.substring(0, 1) + "*" + '*' + str.substring(3, str.length) //截取第一个和大于第4个字符}} else {return "";}}},