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

最新推荐文章于 2023-11-17 15:51:52 发布

IsAnSir

最新推荐文章于 2023-11-17 15:51:52 发布

阅读量1.3w

点赞数 16

分类专栏：前端技术合集文章标签：前端 vue.js javascript 个人开发开发语言

本文链接： https://blog.csdn.net/m0_51060602/article/details/125643746

版权

前端技术合集专栏收录该内容

6 篇文章 7 订阅

订阅专栏

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

在这里我是开发的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 "";
				}
			}
		},