js前端身份证号、手机号脱敏、手机号、身份证号加密处理(ios浏览器兼容性问题)

 更新时间:2022年11月16日 15:50:23   作者:我总是词不达意  
这篇文章主要给大家介绍了关于js前端身份证号、手机号脱敏、手机号、身份证号加密处理的相关资料,还介绍了ios浏览器兼容性问题,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

前言

加密,其实就是对字符串的处理,主要包括查找,截取,替换,当然我们还可以使用正则

前端数据是从后端拿到的,关于数据敏感的问题,可能在开发过程中经常遇到,我们也知道前端对数据的处理也都是表皮层,没法达到真正的安全目的。但,没办法,有时候我们还是要去做一些本不该做的事情来让某些东西看似合理。

1、手机号脱敏

const phone = "13031325689";
const str = phone.replace(/(\d{3})\d*(\d{4})/, '$1****$2')
console.log(str) // 130****5689

2、身份证号脱敏

const card = "512326199102115645";
const str1 = card.replace(/(\w{6})\w*(\w{4})/,'$1********$2'); 
console.log(str) // 512326********5645

$1,$2是表示的小括号里的内容;$1是第一个小括号里的 ,$2是第2个小括号里的 ,以此类推

例如手机号脱敏:

(\d{3}) = 130

(\d{4}) = 5689

3、ios浏览器兼容问题

之前用的正则表达式零宽断言来进行脱敏,导致页面打开空白

safari浏览器不支持正则表达式中携带零宽断言。如果在正则中携带零宽断言,会导致页面空白,并且控制台报错:

SyntaxError: Invalid regular expression: invalid group specifier name
或者

SyntaxError: Invalid regular expression: unrecognized character after (?

使用方式如下(目前只兼容安卓,safari也不支持):

// 正则替换 身份证号脱敏
let idCardNum = '512326199102115645';
idCardNum = idCardNum .replace(/(?<=\d{3})\d{12}(?=\d{2})/,"************")
console.log(idCardNum) // 512*************45
// 正则替换 手机号脱敏
let mobile = '13031325689';
mobile = mobile.replace(/(?<=\d{3})\d{5}(?=\d{2})/,"*****")
console.log(mobile) // 130*****89

补充:js 加密姓名和加密身份证号码

例子加密姓名

EncryptName(name) {
    let newStr;
    if(name.length === 2) {
      newStr = name.substr(0, 1) + '*';
    } else if (name.length > 2) {
      let char = '';
      for (let i = 0, len = name.length - 2; i < len; i++) {
        char += '*';
      }
      newStr = name.substr(0, 1) + char + name.substr(-1, 1);
    } else {
      newStr = name;
    }

    return newStr;
 }

加密身份证

EncryptCert(cert){
    return cert.replace(/^(.{3})(?:\d+)(.{3})$/, "$1*********$2")
}

总结

到此这篇关于js前端身份证号、手机号脱敏、手机号、身份证号加密处理(ios浏览器兼容性问题)的文章就介绍到这了,更多相关js身份证号、手机号脱敏、加密内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 跟我学习javascript的定时器

    跟我学习javascript的定时器

    跟我学习javascript的定时器,告诉大家具体的使用方法,并向大家提出了一个消息要求,制作一个定时器,有没有朋友感兴趣,挑战一下
    2015-11-11
  • js实现(全选)多选按钮的方法【附实例】

    js实现(全选)多选按钮的方法【附实例】

    下面小编就为大家带来一篇js实现(全选)多选按钮的方法【附实例】。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-03-03
  • JS制作简单的三级联动

    JS制作简单的三级联动

    本文给大家分享的是使用javascript实现的一个简单的三级联动菜单,非常简单实用,有需要的小伙伴过来参考下吧。
    2015-03-03
  • 基于javascript数组实现图片轮播

    基于javascript数组实现图片轮播

    这篇文章主要为大家详细介绍了基于javascript数组实现图片轮播的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • ES6入门教程之let和const命令详解

    ES6入门教程之let和const命令详解

    最近做项目的过程中,使用到了ES6,因为之前很少接触,所以使用起来还不够熟悉。通过学习网上的教程后觉着有必要整理下遇到的let和const命令,所以这篇文章主要给大家介绍了ES6中let和const命令的相关资料,需要的朋友可以参考下。
    2017-05-05
  • 一张Web前端的思维导图分享

    一张Web前端的思维导图分享

    这篇文章主要介绍了一张Web前端的思维导图分享,本文直接给出思维导图,图中详细描述了一些需要学习的知识、一些必备的知识,需要的朋友可以参考下
    2015-07-07
  • 小程序获取周围IBeacon设备的方法

    小程序获取周围IBeacon设备的方法

    这篇文章主要为大家详细介绍了小程序获取周围IBeacon设备的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • JavaScript学习笔记之函数记忆

    JavaScript学习笔记之函数记忆

    这篇文章主要介绍了JavaScript学习笔记之函数记忆,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 跟我学习javascript的全局变量

    跟我学习javascript的全局变量

    跟我学习javascript的全局变量,告诉大家三种避免全局变量的方法,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • Webpack实战加载SVG的方法

    Webpack实战加载SVG的方法

    本篇文章主要介绍了Webpack实战加载SVG的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12

最新评论