前言

在日常开发中，我们一定遇到过将手机号中间四位隐藏的需求，今天就来封装两个方法，一个验证是否是手机号，另一个将手机号中间四位隐藏掉返回。

过程

在解决这个问题之前，我们先来了解一下什么是正则表达式。

正则表达式是对一个字符串的一个规则限制，通常可以使用这个规则来校验一个字符串是否符合规则，或用来匹配满足规则的字符，定义一个正则表达式一般是以 / 开始和结束。

了解完正则之后，我们来了解一下手机号的规则，在中国大陆，手机号一般是以1开头的十一位数字，第二位为3-9的数字。

前面我们说了，正则表达式一般是以 / 开始和结束，先来定义一个正则：

const reg = //;

首先来写第一位，一定是以 1 开头，在正则表达式中，以什么开头是以 ^ 来决定：

const reg = /^1/;

接下来第二位，是 3-9 的数字，在正则表达式中，以 [] 来表示一个区间，3-9 区间可以写成 [3-9] ：

const reg = /^1[3-9]/;

最后是剩下的九位，是9个数字，在正则表达式中，用 \d 来表示一个数字，当然也可以使用区间来表示 [0-9]，重复一个规则 n遍 可以使用 {n} 来表示：

// const reg = /^1[3-9][0-9]{9}/;
const reg = /^1[3-9]\d{9}/;

这里还需要注意一点，九位数字结束之后不能再有其他字符了，也就是以九位数字结尾，在正则表达式中，以什么结尾可以用$来决定：

const reg = /^1[3-9]\d{9}$/;

到此为止，一个简单的正则表达式就写完了，为了让它能发挥出作用，这里我们来封装两个方法。

通过传入一个手机号，返回一个布尔类型，来校验手机号是否满足规则，主要使用到了正则表达式的test方法，该方法会返回一个布尔值，用来校验传入的字符是否满足指定规则：

const isMobile = (mobile) => {
  const reg = /^1[3-9]\d{9}$/;
  return reg.test(mobile);
}
isMobile("13111111111") // true

通过 传入一个手机号，返回一个处理过后的手机号，主要使用到了JavaScript的字符串方法replace，该方法用来替换一个字符串中的部分字符，第一个参数可以是一个正则表达式，第二个参数是修改之后的字符串

涉及到正则表达式的分组，通过使用一对 () 来进行分组，使用$n来读取第n个分组：

const handleMobile = (mobile) => {
  return mobile.replace(/(^1[3-9][0-9])\d{4}(\d{4})$/,`$1****$2`);
}
handleMobile("13111112222") // 131****2222

本文通过一个手机号的校验与处理浅浅讲了一下正则表达式的用法，当然了，对于一个手机号的验证可能不止于此，比如加上区号等等，但原理都大差不差，需要说明一点，这里的手机号处理尽量在后端处理，前端处理毫无意义。

我是一名前端程序员，但不止于前端，如果文章对你有所帮助，或者还有什么不同的见解，欢迎评论区讨论，大家一起学习，一起进步~，最后非常感谢你能看到这里。