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

逃离我推掉我的手 2022-09-10 03:14 1307阅读 0赞

**【问题】**

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

**【方法】**

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

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

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

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

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

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

示例代码如下：

// 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一并传给后端，一般后端是不接收的，基本不会出现问题，但还是和后端确认下比较好。

**【扩展】**

几种常见的脱敏方式：

1.  slice()

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

1.  substring()

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

1.  正则

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

--------------------