JS实现手机号脱敏的方法详解
作者：嘤嘤怪呆呆狗
脱敏指的是通过特定的技术手段对敏感数据进行处理,使其不再直接暴露给用户或系统,防止敏感信息泄露,通常在测试、开发、数据处理等场景中使用,本文给大家介绍了JS实现手机号脱敏的方法,需要的朋友可以参考下
1、脱敏的含义
脱敏（Data Masking）指的是通过特定的技术手段对敏感数据进行处理，使其不再直接暴露给用户或系统，防止敏感信息泄露，通常在测试、开发、数据处理等场景中使用。脱敏后的数据应该保留其格式和特征，但不应包含敏感信息。
常见的脱敏方式
- 字符替换：将敏感信息的一部分替换为特殊字符（如
*、X）。 - 数据加密：通过
加密算法将敏感数据加密后存储或传输。 - 数据脱标：删除或用替代值替换敏感数据。
- 局部脱敏：仅对
敏感数据的部分进行替换，而保留其他部分。
就是下面这种效果，这个在现在的生活中也是很常见的东西了
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!
}
这个result 返回的是一个数组 ，
- 数组第一项：这个正则匹配到的整个字符串
- 数组第二项：第一个捕获的组
- 数组第三项：第二个捕获的组
- 以此类推
- index：匹配开始的位置
- input 原始输入字符串
到此这篇关于JS实现手机号脱敏的方法详解的文章就介绍到这了,更多相关JS手机号脱敏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！