js、vue、手机号、身份证号、姓名脱敏

目录

1.直接在插值表达式中操作数据：

示例代码如下(身份证号脱敏)：

示例代码如下(手机号脱敏)：

示例代码如下(姓名脱敏)：

js示例：

2.几种常见的脱敏方式：

slice()

substring()

正则

3.需要将用户姓名进行脱敏处理,比如：张三处理成张*，李三思处理成李 * 思，王二麻子处理成：王* * 子

html :

js:

---

1.直接在插值表达式中操作数据：

示例代码如下(身份证号脱敏)：

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

示例代码如下(手机号脱敏)：

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

示例代码如下(姓名脱敏)：

超过两个字的正则：

{{ name.replace(/(?<=[\u4e00-\u9fa5]).*(?=[\u4e00-\u9fa5])/, "*") }}
 
js测试代码：（具体替换成几个*号需要自己计算）

两个字姓名的正则：

{{ name.replace(/.*(?=[\u4e00-\u9fa5])/, "*") }}

js示例：

var phone ="13623021456";
var idcode ="440582199612056666";
var name ="陈妹";
var name1 ="陈美美";
var name2 ="欧阳美美";
phone =phone.replace(/^(.{3}).+(.{4})$/,"$1****$2");
idcode =idcode.replace(/^(.{4}).+(.{4})$/,"$1****$2");
name = name.replace(/^(.).+$/,"$1*");
name1 = name1.replace(/^(.).+(.)$/,"$1*$2");
name2 = name2.replace(/^(.{2}).+(.)/,"$1**$2");
console.log("phone",phone);
console.log("idcode",idcode);
console.log("name",name);
console.log("name1",name1);
console.log("name2",name2);

运行效果：

2.几种常见的脱敏方式：

slice()

let enStr = str.replace(/(\d{3})\d*(\d{4})/,"$1****$2");

substring()

let str = '18888888888'
let enStr = str.substring(0,3) + '' + str.substring(str.length - 4)
console.log(enStr) // 188****8888

正则

let str = '18888888888'

// 第一种

let enStr = str.replace(/(\d{3})\d*(\d{4})/,"$1****$2");

// 第二种

let enStr = str.replace(/^(.{8})(?:\d+)(.{4})$/, "$1******$2");
console.log(enStr) // 188****8888

3.需要将用户姓名进行脱敏处理,比如：张三处理成张*，李三思处理成李 * 思，王二麻子处理成：王* * 子

html :

{{show==true?userName:name}} {{show==true?'显示':'隐藏'}}

js:

data(){
return{
show:true,
userName：'',
name:'张三'
}
},
mounted(){
this.getName()
}
methods:{
getName(){			
if(this.name.length==2){
this.userName=this.name.substring(0,1)+'' //截取name 字符串截取第一个字符，
}else if(this.name.length==3){
this.userName=this.name.substring(0,1)+""+this.name.substring(2,3)//截取第一个和第三个字符
}else if(this.name.length>3){
this.userName=this.name.substring(0,1)+""+''+this.name.substring(3,this.name.length)//截取第一个和大于第4个字符
}					
},
changName(){//切换显示用户的姓名
this.showText=!this.showText			
}
}