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

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

自定义过滤器的基本原理

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

实现步骤详解

创建自定义过滤器

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

过滤器参数配置

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

• 基础用法：{{ 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项目中灵活实现手机号信息隐藏功能，既保护用户隐私又不影响数据展示效果，实际应用中可根据业务需求进一步扩展功能，如添加脱敏样式、支持动态切换显示级别等,构建更完善的隐私保护机制。