前端vue正则表达式-隐私脱敏处理

有志者事竟成，破釜沉舟百二秦关终属楚
苦心人天不负，卧薪尝胆三千越甲可吞吴。

---

📌博主介绍

💒首页:水香木鱼

🛫专栏：后台管理系统

✍简介: 博主姓：陈，名：春波。花名 “水香木鱼”，星座附属 “水瓶座一枚” 来自于富土肥沃的"黑龙江省"-美丽的 “庆安小镇”

🔰 格言: 生活是一面镜子。 你对它笑， 它就对你笑； 你对它哭， 它也对你哭。

🔋 小目标: 成为 会设计 、会开发的 “万能钥匙”

📝文章内容

本期文章木鱼带领小伙伴们，探索正则的小世界。适合入门级开发人员

隐私脱敏请看三、隐私脱敏【身份证号码、手机号码、邮箱、姓名、】一🔎👇

---

✍ 一、了解正则

(1)、正则修饰符

(2)、查找某个范围内的字符

(3)、特殊含义字符

(4)、量词

✍ 二、常用正则判断案例

1、判断字符串是否为数字、字母、下划线组成

function isValid(str) { return /^\w $/.test(str); }
console.log(isValid("1234abd_#_"));    // false
console.log(isValid("1234abd_"));      // true
//或者写成
console.log(/^\w $/.test("1234abd_#_"));

2、判断字符串是否全部为字母

function isLetter(str) { return /^[a-zA-Z] $/.test(str); }
console.log(isLetter("1234abd_"));    //false
console.log(isLetter("abd"));         //true
//或者写成
console.log(/^[a-zA-Z] $/.test("1234abd_")); 

3、判断字符串是否全部为数字

function isNum(str) { return /^\d $/.test(str); }
console.log(isNum("1234abd_"));    //false
console.log(isNum("1234"));        //true
// 或者写成
console.log(/^\d $/.test("1234abd_"));
console.log(/^[0-9]*$/.test("894532.23"))    // false
console.log(/^[0-9]*$/.test("89453223"))     // true

4、是否带有小数

function isDecimal(strValue){ return /^\d \.\d $/.test(strValue); }
console.log(isDecimal(1245.6))    //true

5、校验是否中文名称组成：

function ischina(str) { return /^[\u4E00-\u9FA5]{2,4}$/.test(str); }
console.log(ischina('我的中文'))    //true

6、校验是否全由8位数字组成：

function isNum(str) { return /^[0-9]{8}$/.test(str); }
console.log(isNum(34355465))    //false

7、校验电话号码格式：

function isTelCode(str) { return /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/.test(str); }
console.log(isTelCode(18017349082))    //true
//开头匹配手机号前三位是 13[0-9] 或 14[5|7] 或者 15[0|1|2|3|5|6|7|8|9] 或 18[0|1|2|3|5|6|7|8|9]；匹配后八位数字为0-9的字符；
console.log(/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test("13456724567"))    //true

8、校验邮件地址是否合法：

function isEmail(str) { return /^\w @[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/.test(str); }
console.log(isEmail("345@qq.com"))    //true 不够严谨，还需修改
 
let m = /^\w ([- .]\w )*@\w ([-.]\w )*\.\w ([-.]\w )*$/
console.log(m.test("32@qq.com"))    //true

9、校验身份证：

开头为一个1-9的数字；加上五位0-9的数字；加上一位1-9的数字；加上三位0-9的数字；加上 0/d 或者 1[0-2]，即月份 01、02……12；加上 ([0|1|2]\d) 或者 3[0-1]，即日起，01、13、25、31；加上身份证末四位；

let str = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/
console.log(str.test("234051198405054021"))    //true

✍ 三、隐私脱敏

• 手机号码：replace(/^(.{3})(?:\d )(.{4})$/, "$1****$2")
• 身份证号码：replace(/^(.{4})(?:\d )(.{4})$/, "$1******$2")
• 姓名：replace(/^(.{1}). (.)/,"$1**$2")
• 邮箱：replace(/(.{0,3}).*@(.*)/, "$1***@$2")

<template>
  <div class="out_Container">
    <p style="margin-top: 20px;">手机号码隐私脱敏:{{phone.replace(/^(.{3})(?:\d )(.{4})$/, "$1****$2") }}</p>
    <p>身份证号码隐私脱敏:{{ cardId.replace(/^(.{4})(?:\d )(.{4})$/, "$1******$2") }}</p>
    <p>姓名隐私脱敏:{{name.replace(/^(.{1}). (.)/,"$1**$2")}}</p>
    <p>邮箱隐私脱敏:{{name.replace(/(.{0,3}).*@(.*)/, "$1***@$2")}}</p>
  </div>
</template>

<script>

export default {
  data() {
    return {
      phone:'17777799999',
      cardId:'232330199901012222',
      name:'水香木鱼',
      email:'csdnsxmy@163.com'
    };
  },
};
</script>

本期文章参考：Vue中的正则表达式

📢博主致谢

---

💡猜你喜欢

vue实现视频播放器功能，你学会了吗

vue实现图片预览功能，提高你的开发效率

前端获取当前系统时间/日期(vue写法)

vue后台管理做适配的最佳方案，你知道吗？

前端引入阿里图标库的最便捷方式

---

1. 0-9 ↩︎

这篇好文章是转载于：学新通技术网