一、脱敏显示处理

<template>
  <div id="app">
    手机号：
    <span>
      {{phone.replace(/^(\d{3})\d+(\d{4})$/,"$1****$2")}}
    </span>
  </div>
</template>

<script>


export default {
  name: "App",
  data() {
    return {
      //手机号
      phone:'',
    }
  },
  created() {
    //这个phone模仿后端请求查询得到的数据
    this.phone="18110100101";
  }
};
</script>

<style>
</style>

二、可编辑表单脱敏数据处理

• 思路：把原数据备份一次，脱敏之后的数据备份一次，然后把输入框的值与脱敏之后的数据比较一下，如果相同则说明，该数据没被修改，如不同则说明该数据被修改，使用最新的输入值。

<template>
  <div id="app">
    手机号：
    <input type="text" v-model="phone" maxlength="11" placeholder="请输入您的手机号"/>
    <br/>
    <input @click="submitPhone()" type="submit"/>
  </div>
</template>

<script>


export default {
  name: "App",
  components: {},
  data() {
    return {
      //手机号
      phone:'',
      //备份手机号
      oldPhone:'',
      //备份脱敏之后的手机号
      oldEditPhone:'',
    }
  },
  created() {
    //这个phone模仿后端请求查询得到的数据
    this.phone="18110100101";
    //备份最开始查询到的phone
    this.oldPhone=this.phone
    //把phone脱敏处理并备份
    this.phone=this.oldPhone.replace(/^(\d{3})\d+(\d{4})$/,"$1****$2")
    this.oldEditPhone=this.phone;
  },
  methods: {
    // 模拟提交手机号
    submitPhone() {
      let phone;
      if (this.phone==this.oldEditPhone){
        phone=this.oldPhone;
      }else{
        phone=this.phone;
      }
      console.log(phone);
    },
  },
};
</script>

<style>
</style>

三、常用脱敏表达式

• 手机号

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

• 邮箱

  email.replace(/(^\w)[^@]*(@.*$)/,"$1****$2")
  

• 身份证号

  card.replace(/^(.{4})(?:\w+)(.{4})$/, "$1****$2")
  

• 姓名脱敏

  name.substring(0,1)+"*".repeat(name.length-1)}}
  

参考文档

• 介绍几种js脱敏加密（手机号邮箱等）