js 手机号隐藏切换
时间: 2023-08-09 17:01:07 浏览: 95
JS中实现隐藏部分姓名或者电话号码的代码
5星 · 资源好评率100%
在 JavaScript 中,如果想要隐藏手机号,可以使用字符串方法和正则表达式来实现。
首先,我们可以使用字符串的 `replace()` 方法和正则表达式来替换手机号中的敏感信息。假设手机号为11位数字,我们可以定义一个正则表达式 `/(\d{3})\d{4}(\d{4})/` 来匹配手机号的前三位和后四位。
然后,我们可以使用 `replace()` 方法将匹配到的部分替换为指定的字符,例如将其替换为 "*"。代码如下所示:
```
let phoneNumber = "13812345678";
let hiddenPhoneNumber = phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
console.log(hiddenPhoneNumber); // 输出:138****5678
```
这样,我们就成功将手机号中的敏感信息隐藏了起来。
另外,如果希望在隐藏和显示手机号之间进行切换,可以通过添加一个按钮或其他触发事件的元素来实现。代码如下所示:
```html
<!DOCTYPE html>
<html>
<head>
<title>手机号隐藏切换</title>
</head>
<body>
<p id="phoneNumber">13812345678</p>
<button onclick="toggleHiddenPhoneNumber()">切换隐藏</button>
<script>
function toggleHiddenPhoneNumber() {
let phoneNumberElement = document.getElementById("phoneNumber");
let phoneNumber = phoneNumberElement.textContent;
let hiddenPhoneNumber = phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
if (phoneNumberElement.textContent === phoneNumber) {
phoneNumberElement.textContent = hiddenPhoneNumber;
} else {
phoneNumberElement.textContent = phoneNumber;
}
}
</script>
</body>
</html>
```
以上代码中,我们首先获取了显示手机号的 `p` 元素,并给一个 `id` 属性,然后创建了一个切换隐藏手机号的按钮。当点击按钮时,触发 `toggleHiddenPhoneNumber()` 函数,该函数会根据显示的手机号是否与原始手机号相同来判断是进行隐藏还是显示操作,并通过改变 `textContent` 属性来实现隐藏切换。
阅读全文