纯前端实现将某个手机号中间四位隐藏，用x代替显示

纯前端实现将某个手机号中间四位隐藏，用x代替显示

	为了将手机号中间四位用X代替，你可以编写一个方法来处理手机号的格式化。这个方法会接收一个完整的手机号作为输入，并返回一个新的字符串，其中中间四位数字被X替换。

实现步骤

1. 验证手机号格式： 确保输入的是有效的手机号（例如，长度为11位的中国手机号）。
2. 替换中间四位： 使用字符串操作或正则表达式来替换手机号中间的四位数字。
3. 返回格式化后的手机号： 返回新的字符串，其中中间四位已被X替换

<template>
  <div>
    <p>手机号: {{ maskPhoneNumber(userInfo.phone) }}</p>
    <!-- 其他内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        phone: '13812345678', // 示例电话号码
      }
    };
  },
  methods: {
    maskPhoneNumber(phone) {
      if (phone.length !== 11 || !/^\d{11}$/.test(phone)) {
        console.warn('无效的手机号');
        return phone;
      }
      return `${phone.slice(0, 3)}XXXX${phone.slice(7)}`;
    }
  }
};
</script>

验证手机号格式：我们使用了简单的正则表达式/^\d{11}$/来确保手机号是11位数字。如果你有更复杂的验证规则（例如，特定的前缀），可以根据需要调整正则表达式。

if (phone.length !== 11 || !/^\d{11}$/.test(phone)) {
  console.warn('无效的手机号');
  return phone;
}

替换中间四位：我们使用了字符串的slice方法来提取手机号的前三位和后四位，并在中间插入XXXX。这样可以确保原始手机号的其他部分保持不变。

return `${phone.slice(0, 3)}XXXX${phone.slice(7)}`;

正则表达式替换：另一种方式是使用正则表达式来匹配并替换中间四位。这种方式更加简洁，但可能不如字符串切片直观。

return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1XXXX$2');