JS实现手机号脱敏、邮箱脱敏、身份证号脱敏、姓名脱敏等常见脱敏代码示例

 更新时间:2024年02月01日 15:32:38   作者:暴怒的代码  
这篇文章主要给大家介绍了关于JS实现手机号脱敏、邮箱脱敏、身份证号脱敏、姓名脱敏等常见脱敏的相关资料,脱敏的目的是保护用户隐私,一种常见的方式是显示部分字符,用星号或其他字符替代,需要的朋友可以参考下

一:为什么要脱敏?

在前端项目开发中,数据的展示与渲染是非常关键的一步。通常我们会从后端接口直接拿到数据,但是在某些情况下渲染一些隐私信息,比如身份证号,手机号等。这些我们就需要进行脱敏处理,比如前三后四的格式,又或者其它格式。这样有利于布局和保密。接下来,就让我们看一下常见的脱敏种类吧!

二:如何实现脱敏?

在实现脱敏上,我们主要使用的是正则表达式和字符串的 replace 替换这两个技术。字符表达式是用来匹配我们要去进行替换的数据。replace 则是根据各种不同的需求替换成不同的字符。

1.手机号脱敏(前三后四)

// 手机号做脱敏处理
function phoneHide(phone) {
    let reg = /^(1[3-9][0-9])\d{4}(\d{4}$)/; // 定义手机号正则表达式
    phone = phone.replace(reg, '$1****$2');
    return phone; // 185****6696
}

2.邮箱脱敏

function emailHide(email) {
    var avg;
    var splitted;
    var email1;
    var email2;
    splitted = email.split('@');
    email1 = splitted[0];
    avg = email1.length / 2;
    email1 = email1.substring(0, email1.length - avg);
    email2 = splitted[1];
    return email1 + '***@' + email2; // 输出为81226***@qq.com
}

3.身份证号脱敏

function cardHide(card) {
    const reg = /^(.{6})(?:\d+)(.{4})$/; // 匹配身份证号前6位和后4位的正则表达式
    const maskedIdCard = card.replace(reg, '$1******$2'); // 身份证号脱敏,将中间8位替换为“*”
    return maskedIdCard; // 输出:371782******5896
}

4.姓名脱敏

function nameHide(name) {
    if (name.length == 2) {
        name = name.substring(0, 1) + '*'; // 截取name 字符串截取第一个字符,
        return name; // 张三显示为张*
    } else if (name.length == 3) {
        name = name.substring(0, 1) + '*' + name.substring(2, 3); // 截取第一个和第三个字符
        return name; // 李思思显示为李*思
    } else if (name.length > 3) {
        name = name.substring(0, 1) + '*' + '*' + name.substring(3, name.length); // 截取第一个和大于第4个字符
        return name; // 王五哈哈显示为王**哈
    }
}

三:结尾 

脱敏处理是信息安全的重要手段,它可以有效保护敏感信息不被暴露。在JavaScript中,我们可以使用一些基本的脱敏处理方法。以上这些就是比较常见的方法,各位小伙伴可以根据自己的需求使用哦。当然还有各种不同的情景,不过相信各位小伙伴可以通过上面的代码写出更适配你所需要的逻辑。

附前端js让手机号脱敏的其他几种方法

标题手机号脱敏方法有几种

      // 方法一:使用substring()方法
              let phoneNumberOne='19909091221';
              let desensitizationOne=phoneNumberOne.substring(0,3)+' **** '+phoneNumberOne.substring(7);
              // 方法二:使用substring()方法
              let phoneNumberTwo='19909091221';
              let desensitizationTwo=phoneNumberTwo.substr(0,3)+' **** '+phoneNumberTwo.substr(7);
              // 方法三:使用正则表达式方法
              let phoneNumberThree='19909091221';
              let regular=/(\d{3})\d*(\d{4})/
              let desensitizationThree=phoneNumberThree.replace(regular,'$1****$2');

              //总结一下区别:
              //  substring第一个参数是开始下标,第二个是结束下标。
              //  substr第一个参数是开始下标,第二个是截取几位。

到此这篇关于JS实现手机号脱敏、邮箱脱敏、身份证号脱敏、姓名脱敏等常见脱敏的文章就介绍到这了,更多相关JS常见脱敏手机号邮箱等内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 如何使用uniapp开发微信小程序获取当前位置详解

    如何使用uniapp开发微信小程序获取当前位置详解

    uni-app小程序项目无法直接获取到地理位置,只能通过获取到的经纬度,调用第三方地图Api获取,下面这篇文章主要给大家介绍了关于如何使用uniapp开发微信小程序获取当前位置的相关资料,需要的朋友可以参考下
    2022-10-10
  • 微信小程序loading组件显示载入动画用法示例【附源码下载】

    微信小程序loading组件显示载入动画用法示例【附源码下载】

    这篇文章主要介绍了微信小程序loading组件显示载入动画用法,结合实例形式分析了loading组件显示载入动画的相关事件操作与属性设置技巧,并附带源码供读者下载参考,需要的朋友可以参考下
    2017-12-12
  • BootStrap的select2既可以查询又可以输入的实现代码

    BootStrap的select2既可以查询又可以输入的实现代码

    这篇文章主要介绍了bootstrap的select2既可以查询又可以输入的实现代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-02-02
  • javascript实现点击产生随机图形

    javascript实现点击产生随机图形

    这篇文章主要为大家详细介绍了javascript实现点击产生随机图形,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • 简化版手机端照片预览组件

    简化版手机端照片预览组件

    这篇文章主要介绍了简化版手机端照片预览组件的相关资料,需要的朋友可以参考下
    2015-04-04
  • TypeScript中let和var的区别介绍

    TypeScript中let和var的区别介绍

    这篇文章主要介绍了TypeScript let与var的区别,主要从作用域等这几个方面做详细介绍,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-07-07
  • javascript实现模拟时钟的方法

    javascript实现模拟时钟的方法

    这篇文章主要介绍了javascript实现模拟时钟的方法,涉及javascript操作时间实时显示的相关技巧,需要的朋友可以参考下
    2015-05-05
  • Javascript匿名函数的一种应用 代码封装

    Javascript匿名函数的一种应用 代码封装

    说实话,对于js初学者的我来说。这个东西太吓人了,在这些JS库中,这个函数基本上把整个库的所有代码全括起来了,这种写法完全超越了我的常识。
    2010-06-06
  • 基于javascript的无缝滚动动画实现2

    基于javascript的无缝滚动动画实现2

    这篇文章主要介绍了基于javascript的无缝滚动动画实现2,文章通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • JavaScript实现烟花绽放动画效果

    JavaScript实现烟花绽放动画效果

    这篇文章主要介绍了JavaScript如何实现烟花绽放动画效果,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-08-08

最新评论