AngularJs自定义过滤器如何隐藏手机号中间四位？

在Web开发中，处理用户隐私数据是重要环节，手机号作为敏感信息常需要部分隐藏显示，AngularJS作为经典前端框架，通过自定义过滤器可便捷实现手机号信息脱敏，本文将详细介绍AngularJS自定义过滤器的实现方法、代码示例及注意事项,帮助开发者高效完成数据保护需求。

自定义过滤器的基本原理

AngularJS过滤器本质是一个函数，接收输入值并返回处理后的值，自定义过滤器需通过module.filter()方法注册，格式为module.filter('过滤器名称', function() { return function(input, 参数) { return 处理后的值; }; })，手机号隐藏功能的核心逻辑是截取部分字符并用星号替代,同时保持手机号格式规范。

实现步骤详解

创建自定义过滤器

首先在AngularJS模块中定义过滤器，命名为mobileHide，该过滤器接收手机号字符串作为输入，并支持自定义隐藏规则参数,以下是基础实现代码：

angular.module('myApp').filter('mobileHide', function() {
    return function(input, start, end) {
        if (!input) return '';
        start = start || 3;  // 默认隐藏前3位
        end = end || 4;      // 默认隐藏后4位
        var length = input.length;
        if (start + end >= length) return input;  // 隐藏位数超过长度则返回原值
        return input.substring(0, start) + 
               '*'.repeat(length - start - end) + 
               input.substring(length - end);
    };
});

过滤器参数配置

过滤器支持三个参数：输入的手机号、开始隐藏位置、结束隐藏位置，通过参数灵活控制隐藏规则,适应不同业务场景：

• 基础用法：{{ phone | mobileHide }} → 隐藏中间4位（如138****5678）
• 自定义隐藏：{{ phone | mobileHide:4:3 }} → 隐藏前4位后3位（如****5678）
• 完全显示：{{ phone | mobileHide:0:0 }} → 显示完整手机号

在模板中使用

在HTML模板中通过管道符调用过滤器,支持与其他过滤器组合使用：

<div>
    <p>默认隐藏：{{ user.phone | mobileHide }}</p>
    <p>自定义隐藏：{{ user.phone | mobileHide:2:2 }}</p>
    <p>完整显示：{{ user.phone | mobileHide:0:0 }}</p>
</div>

高级功能扩展

支持国际号码

针对国际手机号（如+86 13812345678）,可扩展过滤器逻辑：

return function(input, start, end) {
    if (!input) return '';
    var pureNumber = input.replace(/D/g, '');  // 移除非数字字符
    if (pureNumber.length <= 7) return input;   // 短号不处理
    var countryCode = pureNumber.substring(0, 3);
    var localNumber = pureNumber.substring(3);
    // 对本地号码进行隐藏处理
    var hiddenLocal = localNumber.substring(0, start) + 
                     '*'.repeat(localNumber.length - start - end) + 
                     localNumber.substring(localNumber.length - end);
    return countryCode + ' ' + hiddenLocal;
};

动态隐藏规则

结合控制器实现动态隐藏策略：

angular.module('myApp').controller('UserController', function($scope) {
    $scope.user = { phone: '13812345678', hideLevel: 'partial' };
    $scope.getHiddenPhone = function() {
        switch($scope.user.hideLevel) {
            case 'full': return $scope.user.phone | mobileHide:0:0;
            case 'partial': return $scope.user.phone | mobileHide;
            case 'strict': return $scope.user.phone | mobileHide:4:4;
        }
    };
});

常见问题与解决方案

最佳实践建议

1. 数据校验：在过滤器前添加校验逻辑，确保输入为有效手机号
2. 默认参数：设置合理的默认隐藏位数，平衡隐私与可读性
3. 国际化支持：针对不同地区号码规范调整隐藏策略
4. 单元测试：编写测试用例覆盖各种边界情况
5. 性能优化：对大数据列表使用limitTo过滤器减少渲染压力

通过上述方法，开发者可在AngularJS项目中灵活实现手机号信息隐藏功能，既保护用户隐私又不影响数据展示效果，实际应用中可根据业务需求进一步扩展功能，如添加脱敏样式、支持动态切换显示级别等,构建更完善的隐私保护机制。