JS實現(xiàn)手機號脫敏的方法詳解

更新時間：2025年03月11日 11:18:09 作者：嚶嚶怪呆呆狗

脫敏指的是通過特定的技術手段對敏感數據進行處理,使其不再直接暴露給用戶或系統(tǒng),防止敏感信息泄露,通常在測試、開發(fā)、數據處理等場景中使用,本文給大家介紹了JS實現(xiàn)手機號脫敏的方法,需要的朋友可以參考下

1、脫敏的含義

脫敏（Data Masking）指的是通過特定的技術手段對敏感數據進行處理，使其不再直接暴露給用戶或系統(tǒng)，防止敏感信息泄露，通常在測試、開發(fā)、數據處理等場景中使用。脫敏后的數據應該保留其格式和特征，但不應包含敏感信息。

常見的脫敏方式

字符替換：將敏感信息的一部分替換為特殊字符（如 *、X）。
數據加密：通過加密算法將敏感數據加密后存儲或傳輸。
數據脫標：刪除或用替代值替換敏感數據。
局部脫敏：僅對敏感數據的部分進行替換，而保留其他部分。

就是下面這種效果，這個在現(xiàn)在的生活中也是很常見的東西了

在這里插入圖片描述

2、前端處理手機號脫敏的方式

2.1 字符串的replace搭配正則

在這里插入圖片描述

核心點

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的特殊特換模式

在這里插入圖片描述

    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!
    }

在這里插入圖片描述