vue或js实现字段脱敏(隐藏字符串)

生产环境用户的隐私数据，比如手机号、身份证或者一些账号配置等信息，应该进行脱敏显示，一般这种工作需要后台来实现，前端的脱敏不是真正的脱敏，那么前端的脱敏怎么做呢，下面一起学习一下。

vue

如果是表格的话可以在定义表格的时候字段行中多定义一个字段，不要把card定义为全局的字段不然一个显示就全显示了

{ text: "身份证号", value: "身份证号" , width: 180,cardshow:true },
  { text: "本人电话", value: "本人电话", width: 150, phoneshow:true},

然后用正则来处理,当点击图标是改变状态

<template v-slot:item.身份证号="{ item }">
        {{!item.cardshow? item.身份证号.replace(/^(.{3})(?:\w+)(.{3})$/, "\$1********\$2") : item.身份证号}}
        <v-icon color="#1976D2" @click="item.cardshow=!item.cardshow">mdi-eye-off</v-icon>
      </template>

效果

如果不是表格的字段可以在data中定义字段

  data(){
    return{ 
      fieldbool:true
    }
  },

在页面中处理

          <span>身份证号：</span>
          <span>{{fieldbool?idCard.replace(/^(.{3})(?:\w+)(.{3})$/, "\$1********\$2"):idCard}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
          <i class="el-icon-view" @click="fieldbool=!fieldbool"></i>

效果