JS实现手机号脱敏的方法详解

作者：异步漫步时间：2026-10-31 19:35:50浏览：343

本文详细解析了前端实现手机号脱敏的几种常见JavaScript方法。重点介绍了利用String.prototype.replace结合正则表达式进行字符替换的核心逻辑，包括捕获组$1和$2的使用；同时探讨了通过slice截取字符串前后部分进行拼接的技巧，以及利用数组splice删除中间四位并插入星号的操作流程。

1、脱敏的含义

数据脱敏（Data Masking）是指利用特定的技术手段对敏感信息进行处理，使其不再直接暴露给用户或系统，从而防止敏感信息泄露。这一技术通常应用于测试、开发及数据处理等场景。经过脱敏处理的数据应当保留其原有的格式和特征，但必须不包含真实的敏感信息。

常见的脱敏方式

字符替换：将敏感信息的一部分替换为特殊字符（如 *、X）。
数据加密：通过加密算法将敏感数据加密后存储或传输。
数据脱标：删除或用替代值替换敏感数据。
局部脱敏：仅对敏感数据的部分进行替换，而保留其他部分。

就是下面这种效果，这个在现在的生活中也是很常见的东西了

1、脱敏的含义

2、前端处理手机号脱敏的方式

2.1 字符串的replace搭配正则

1、脱敏的含义

核心点

String.prototype.replace()
正则表达式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text" id="phone" value="13012345678">
  <button id="btn">点击</button>
  <br>
  脱敏后数据：<span id="result"></span>
  <script>
    document.querySelector('#btn').onclick = function () {
      let phone = document.querySelector('#phone').value
      let newPhone = phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
      document.querySelector('#result').innerHTML = newPhone
    }
  </script>

</body>

</html>

在此处，(\d{3})\d{4}(\d{4}) 就是核心。这里的 $1 ,$2 只会匹配上以 () 包裹的东西，所以 $2 就是5678 ，不是1234。$1 指的就是第一个匹配上的大括号，$2 指的就是第二个匹配上的大括号

    $1 ==> (\d{ 3}) ==> 130
    $2 ==> (\d{4}) ==> 5678

2.2 字符串的slice

核心点

核心点就是利用了字符串截取的方法

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text" id="phone" value="13012345678">
  <button id="btn">点击</button>
  <br>
  脱敏后数据：<span id="result"></span>
  <script>
    document.querySelector('#btn').onclick = function () {
      let phone = document.querySelector('#phone').value
      // 2、第二种方法 slice
      // slice(0,3) 截取前3位
      // slice(-4) 11+(-4) = 7 ，从第八个字符截取，一直到最后
      let newPhone = phone.slice(0, 3) + '****' + phone.slice(-4)
      document.querySelector('#result').innerHTML = newPhone
    }

    // $1 ==> (\d{ 3}) ==> 130
    // $2 ==> (\d{4}) ==> 5678
  </script>

</body>

</html>

2.3 数组的splice

核心点

先转成数组
利用数组的 splice 方法，先删除四个，然后再插入四个星号

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text" id="phone" value="13012345678">
  <button id="btn">点击</button>
  <br>
  脱敏后数据：<span id="result"></span>
  <script>
    document.querySelector('#btn').onclick = function () {
      // 3、数组拼接方法
      let phone = document.querySelector('#phone').value
      let arr = phone.split('')
      arr.splice(3, 4, '****')
      let newPhone = arr.join('')
      document.querySelector('#result').innerHTML = newPhone
    }

    // $1 ==> (\d{ 3}) ==> 130
    // $2 ==> (\d{4}) ==> 5678
  </script>

</body>

</html>

其实还有其他方法在此不列举了，但还是第一种，是最常见的方式

3、replace的特殊特换模式

1、脱敏的含义

    const str = "Hello dgg and world!";
    const regex = /(dgg)/;
    const result = str.match(regex);
    console.log(result);

    if (result) {
      const beforeMatch = str.slice(0, result.index);  // 匹配前的文本
      const afterMatch = str.slice(result.index + result[0].length);  // 匹配后的文本

      console.log("匹配前的文本:", beforeMatch);  // Hello,
      console.log("匹配后的文本:", afterMatch); // !
      console.log("匹配到的文本:", result[0]);   // Hello, world!
    }

1、脱敏的含义

这个result 返回的是一个数组，

数组第一项：这个正则匹配到的整个字符串
数组第二项：第一个捕获的组
数组第三项：第二个捕获的组
以此类推
index：匹配开始的位置
input 原始输入字符串

到此这篇关于JS实现手机号脱敏的方法详解的文章就介绍到这了,更多相关JS手机号脱敏内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

D3.js 比例尺与坐标轴的配置详解

2026-11-05 16:54:46

JavaScript怎么遍历对象的Symbol键和不可枚举属性

2026-11-05 13:13:39

封装一个健壮的JS字符串判空工具函数

2026-11-05 12:16:14

JavaScript合并数组的三种常用方法：concat、扩展运算符与push

2026-11-05 11:22:29

JavaScript立即执行函数(IIFE)是什么及基本语法

2026-11-05 10:51:19