前端手机号、身份证号脱敏，中间显示星号*，不改变源数据（js、vue手机号、身份证号脱敏）

【问题】手机号或者身份证号中间数字用星号代替，不改变源数据。【方法】直接在插值表达式中操作数据：示例代码如下(身份证号脱敏)：<div>{{ cardId.replace(/^(.{8})(?:\d+)(.{4})$/, "$1******$2") }}</div>示例代码如下(手机号脱敏)：<div>{{ mobil.replace(/^(.{3})(?:\d

huangfuyk

14271人浏览 · 2021-09-14 19:10:43

huangfuyk · 2021-09-14 19:10:43 发布

【问题】

手机号或者身份证号中间数字用星号代替，不改变源数据。

【方法】

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

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

<div>
{{ cardId.replace(/^(.{8})(?:\d+)(.{4})$/, "$1******$2") }}
</div>

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

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

在获取到接口数据时，新建一个接口返回值中不存在的变量来接收：

示例代码如下：

// cardIdo即为接收者
<td>{{ data.cardIdo }}</td>

this.httpClient.post( '接口地址' ).subscribe((res: any) => {
  if (res.errno === '0') {
    for (let item of res.data.body) {
    // cardId为后端返回的一个字段，cardIdo为新建，展示cardIdo即可
      item.cardIdo = item.cardId.replace(/(?<=\d{6})\d{9}(?=\d{2})/, '*********');
    }
  }
});

注意：第二种方法，在入参的时候，会把cardIdo一并传给后端，一般后端是不接收的，基本不会出现问题，但还是和后端确认下比较好。

【扩展】

几种常见的脱敏方式：

slice()

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

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