JavaScript实现手机号中间四位隐藏及正则验证详解
本文介绍如何使用JavaScript正则表达式处理手机号隐私显示与格式验证。通过replace方法结合分组捕获,实现将手机号中间四位替换为星号或前七位隐藏的效果。同时提供完整的HTML与JS代码示例,演示如何验证1开头、长度为11位且符合特定号段的手机号码,适用于前端表单输入场景。
JavaScript实现手机号中间四位隐藏
在Web开发中,为了保护用户隐私,常需对手机号进行脱敏处理。本节演示如何使用JavaScript将手机号中间的四位数字替换为星号,生成如“123****8901”的常见隐匿格式。
// 匹配手机号首尾,以类似“123****8901”的形式输出
'12345678901'.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
具体实现代码如下:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
var phone='12345678901';
var dh=phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
alert (dh);
</script>
</head>
<body>
</body>
</html>
上述正则表达式匹配字符串中连续的11位数字,并将中间4位替换为星号。若需求仅为保留末尾4位而隐藏前7位,可调整正则模式为匹配前7位数字并替换为星号。
隐藏手机号前七位的实现方法
接下来演示如何隐藏手机号的前7位数字。
// 匹配连续11位数字,并替换其中的前7位为*号
'15110280327'.replace(/\d{7}(\d{4})/, '*******$1');
相关实现代码示例如下:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
var phone='12345678901';
var dh=phone.replace(/\d{7}(\d{4})/, '*******$1');
alert (dh);
</script>
</head>
<body>
</body>
</html>
补充说明:正则表达式中的圆括号用于定义分组和子模式串。在String的replace()方法中,替换参数可以使用$n(n为数字)来引用对应分组捕获的子串,从而实现灵活替换。
手机号验证与隐藏综合实例
综合应用示例:结合手机号格式验证与中间四位隐藏功能。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>js手机号码验证以及隐藏中间四位数字</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="text" id="myText">
<p>js手机验证以及隐藏手机号码中间四位</p>
<input type="button" value="提交" id="subBtn">
<script type='text/javascript'>
$(function(){
$("#subBtn").click(function(){
if($("#myText").val()==""){
alert("手机号码不能为空")
}else{
if(iphoneCheck(myText)){
alert("提交成功");
var phone=$("#myText").val();
var myphone=phone.substr(3,4);
//alert(myphone)
var lphone=phone.replace(myphone,"****");
$("#myText").val(lphone);
}else{
alert("请输入正确的手机号码")
}
}
function iphoneCheck(id){
var temp=document.getElementById("myText");
var re=/^[1][34587]\d{9}$/;//手机号码验证正则表达式
if(re.test(temp.value)){
return true;
}else{
return false;
}
}
});
});
</script>
</body>
</html>
代码实现如下:
总结:本文展示了利用JavaScript正则表达式进行手机号脱敏显示与格式校验的方法。通过合理运用分组捕获与替换功能,可有效提升前端数据展示的安全性与规范性,希望这些示例对日常开发有所帮助。
ES6模块化中js文件怎么用import和export交互
2026-11-05 17:00:48
JS读取本地文件时报错或无响应的常见原因
2026-11-05 16:32:31
let、const与var的区别:JavaScript变量声明最佳实践
2026-11-05 14:16:38
JS中直接定义静态二维数组的字面量写法
2026-11-05 14:16:08
JS 怎么查找字符串中所有匹配项的位置
2026-11-05 14:15:53
