隐藏手机号码的中间四位数jquery

admin 2026年02月08日 08:05 101 0

使用jQuery实现手机号码中间四位数隐藏，可有效保护用户隐私，核心思路是通过字符串处理截取号码前三位与后四位，用星号替换中间四位，具体操作：先获取目标元素（如input或span）的值，用正则表达式/^(\d{3})\d{4}(\d{4})$/匹配，通过replace()方法将中间四位替换为****，最后将处理后的值重新赋给元素，例如代码：$("#phone").val($("#phone").val().replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2"))，该方法简单高效，适用于表单展示或数据脱敏场景，提升用户体验。

使用jQuery隐藏手机号码中间四位数的实用方法

在Web开发中，手机号码作为个人敏感信息，常需要在保护用户隐私的同时确保信息的可识别性，隐藏中间四位数字（如138****5678）已成为行业标准做法，既能保留号码归属地信息（前三位）和用户标识（后四位），又能有效防止核心信息泄露，本文将详细介绍如何利用jQuery轻松实现手机号码中间四位数的隐藏功能,并提供多种实用场景和优化建议。

实现原理：字符串截取与拼接技术

隐藏手机号码中间四位数的核心逻辑基于字符串截取与拼接操作,具体步骤如下：

获取完整的11位手机号码字符串（如"13812345678"）；
使用字符串截取方法获取前3位（"138"）和后4位（"5678"）；
用4个星号（""）拼接中间部分，形成最终隐藏后的字符串（"1385678"）。

jQuery提供了简洁高效的DOM操作和字符串处理方法，能够快速实现这一逻辑,使代码更加优雅且易于维护。

具体实现步骤

准备HTML结构

在页面中为需要隐藏的手机号码元素添加特定的类名或ID，以便jQuery能够准确定位目标元素,以下是基础HTML结构示例：

<p class="phone-text">原始手机号：13812345678</p>
<button id="hide-btn">隐藏手机号</button>
<p class="hidden-phone" style="display:none;"></p>

这里我们设计了一个按钮来触发隐藏操作，结果将展示在另一个元素中（也可以选择直接替换原元素内容，根据实际需求灵活处理）。

编写jQuery代码

通过jQuery选择器定位目标元素，获取手机号文本后进行字符串处理,以下是完整的实现代码：

$(document).ready(function() {
    // 点击按钮触发隐藏操作
    $('#hide-btn').click(function() {
        // 获取原始手机号（实际开发中可通过.data()或直接文本获取）
        const originalPhone = '13812345678'; 
        // 校验手机号格式（确保11位数字且符合中国手机号规则）
        if (!/^1[3-9]\d{9}$/.test(originalPhone)) {
            $('.hidden-phone').text('手机号格式不正确').css('color', '#dc3545');
            return;
        }
        // 处理字符串：前3位 + **** + 后4位
        const hiddenPhone = originalPhone.substring(0, 3) + '****' + originalPhone.substring(7);
        // 展示隐藏后的号码
        $('.hidden-phone').text('隐藏后手机号：' + hiddenPhone).fadeIn();
    });
});

进阶：批量处理多个手机号

在实际项目中，我们经常需要处理页面中的多个手机号（如用户列表、订单详情等）,此时可以通过jQuery的遍历方法批量处理：

$(document).ready(function() {
    // 隐藏所有包含类名.phone-item的元素中的手机号
    $('.phone-item').each(function() {
        const $item = $(this);
        const phoneText = $item.text().trim();
        // 提取手机号（假设文本格式为"手机号：13812345678"）
        const phoneMatch = phoneText.match(/(\d{3})\d{4}(\d{4})/);
        if (phoneMatch) {
            const hiddenPhone = phoneMatch[1] + '****' + phoneMatch[2];
            $item.text(phoneText.replace(/(\d{3})\d{4}(\d{4})/, hiddenPhone));
        }
    });
});

对应的HTML示例：

<div class="phone-item">手机号：13812345678</div>
<div class="phone-item">联系电话：15998765432</div>

动态数据处理方案

对于通过AJAX动态加载的数据，我们需要在数据渲染完成后执行隐藏逻辑,以下是推荐的处理方式：

$(document).ready(function() {
    // 使用事件委托处理动态加载的内容
    $(document).on('click', '.hide-phone-btn', function() {
        const $btn = $(this);
        const $target = $btn.data('target');
        const originalPhone = $($target).text().trim();
        if (!/^1[3-9]\d{9}$/.test(originalPhone)) {
            alert('手机号格式不正确');
            return;
        }
        const hiddenPhone = originalPhone.slice(0, 3) + '****' + originalPhone.slice(-4);
        $($target).text(hiddenPhone);
        $btn.text('显示完整号码').removeClass('hide-phone-btn').addClass('show-phone-btn');
    });
    // 显示完整号码
    $(document).on('click', '.show-phone-btn', function() {
        const $btn = $(this);
        const $target = $btn.data('target');
        const fullPhone = $btn.data('fullPhone');
        $($target).text(fullPhone);
        $btn.text('隐藏号码').removeClass('show-phone-btn').addClass('hide-phone-btn');
    });
});

完整示例（可直接复制使用）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">jQuery隐藏手机号中间四位</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .container { 
            max-width: 600px; 
            margin: 50px auto; 
            padding: 20px; 
            border: 1px solid #ddd; 
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .phone-text { 
            margin: 10px 0; 
            font-size: 16px;
            color: #333;
        }
        #hide-btn { 
            padding: 8px 16px; 
            background: #007bff; 
            color: white; 
            border: none; 
            border-radius: 4px; 
            cursor: pointer;
            transition: background-color 0.3s;
        }
        #hide-btn:hover { 
            background: #0056b3; 
        }
        .hidden-phone { 
            margin: 10px 0; 
            color: #28a745; 
            font-weight: bold;
            opacity: 0;
            transition: opacity 0.5s;
        }
        .phone-list {
            margin-top: 30px;
        }
        .phone-item {
            padding: 10px;
            margin: 5px 0;
            background: #f8f9fa;
            border-radius: 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .toggle-btn {
            padding: 4px 12px;
            background: #6c757d;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            font-size: 14px;
        }
        .toggle-btn:hover {
            background: #5a6268;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>手机号隐私保护示例</h2>
        <p class="phone-text">原始手机号：<span id="original-phone">13812345678</span></p>
        <button id="hide-btn">隐藏手机号</button>
        <p class="hidden-phone" id="hidden-result"></p>
        <div

标签： #手机号 #中间四位 #jquery