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

在Web开发中,处理用户隐私数据是一项重要任务，特别是手机号这类敏感信息，AngularJS作为经典的JavaScript框架，提供了强大的过滤器（Filter）机制，允许开发者对数据进行格式化处理，本文将详细介绍如何通过自定义过滤器实现手机号信息隐藏，既保护用户隐私，又保持数据的可读性。

手机号隐藏的需求分析

在实际应用场景中,手机号通常需要在前端页面展示，但为了安全考虑，不能完整显示，常见的隐藏规则包括：仅显示前3位和后4位，中间4位用星号（*）或其他符号替代，13812345678应显示为138****5678，这种处理方式既能验证用户身份，又能避免信息泄露，实现这一功能的核心在于对字符串的截取和替换操作，而AngularJS的自定义过滤器正是处理这类数据格式化需求的理想工具。

自定义过滤器的基础语法

在AngularJS中,自定义过滤器通过模块的filter方法注册，其基本语法为：

angular.module('appModule').filter('filterName', function() {
    return function(input, params) {
        // 数据处理逻辑
        return processedResult;
    };
});

input是管道符（）左侧传递过来的原始数据，params是可选的参数，用于自定义过滤器的行为，对于手机号隐藏功能，我们只需要处理input参数即可。

手机号隐藏过滤器的实现步骤

创建自定义过滤器

在AngularJS模块中定义名为phoneHide的过滤器：

angular.module('myApp').filter('phoneHide', [function() {
    return function(phoneNumber) {
        if (!phoneNumber) return '';
        // 使用正则表达式验证手机号格式
        if (!/^1[3-9]d{9}$/.test(phoneNumber)) {
            return phoneNumber; // 非法手机号直接返回原值
        }
        // 截取前3位和后4位，中间用4个星号替代
        return phoneNumber.substring(0, 3) + '****' + phoneNumber.substring(7);
    };
}]);

过滤器逻辑解析

• 数据验证：通过正则表达式/^1[3-9]d{9}$/确保输入的是中国大陆11位手机号，避免非手机号数据被错误处理。
• 字符串截取：使用substring方法分别提取手机号的前3位（0-2索引）和后4位（7-10索引），中间部分用填充。
• 边界处理：当输入为空或非字符串时，直接返回空字符串，避免程序报错。

在模板中使用过滤器

在HTML模板中,通过管道符调用自定义过滤器：

<div>
    您的手机号是：{{ user.phoneNumber | phoneHide }}
</div>

如果user.phoneNumber的值为13812345678，页面将显示为138****5678。

过滤器的进阶优化

支持自定义隐藏字符

若需要灵活替换隐藏字符（如用替代），可修改过滤器以支持参数：

return function(phoneNumber, hideChar) {
    hideChar = hideChar || '*'; // 默认隐藏字符为星号
    return phoneNumber.substring(0, 3) + hideChar.repeat(4) + phoneNumber.substring(7);
};

模板调用方式为：{{ phone | phone:'#' }}。

处理国际手机号

若需支持国际区号,可扩展逻辑：

if (phoneNumber.startsWith('+86')) {
    return phoneNumber.substring(0, 6) + '****' + phoneNumber.substring(10);
}

常见问题与解决方案

通过AngularJS自定义过滤器实现手机号隐藏,既简洁又高效，开发者只需关注数据处理逻辑，而AngularJS会自动管理过滤器的生命周期和依赖注入，实际应用中，可根据业务需求进一步扩展功能，如支持多国手机号格式或动态配置隐藏规则，这种方案不仅提升了用户体验，也符合数据安全的基本要求，是前端开发中处理隐私数据的实用技巧。