元字符的详细解析

上一篇文章介绍了正则的用处以及正则中这些元字符的基本含义，但是如果我们只知道那些元字符的含义，不知道怎么使用和加以练习，那么对于正则我们还只是看见了门槛，并没有踏入，那么本篇文章就让我们迈起脚步正式走入正则的世界吧。let’s go!

我的学习方式是：记忆元字符的含义 + 例子消化 + 案例练习

首先：咱们的思维导图来喽

一、正则的匹配和捕获

• 匹配：test()：查看字符串是否符合这个正则
• 捕获：exec()

关于这两个方法的具体介绍，会在下一篇文章中介绍，本文章的主要内容是元字符的具体含义、使用

二、元字符详细解析

重点来喽，搬好小板凳，准备好好听课，咳咳咳！

1. ^ $

• ^：以那个元字符开头
• $：以那个元字符结尾
• \d：0-9的数字
• {n}：出现n次
  • 注意点：想要使用这个，正则表达式中必须含义结尾，否则大于n的次数也是可以测试通过的，只不过捕获的时候还是捕获n个
• [n-m]：n与m之间的任意值即可，包括n和m

例子

//匹配的是：以数字开头的字符串
let reg = /^\d/;  
console.log(reg.test('name'));   //false
console.log(reg.test('2020name'));  //true
console.log(reg.test('name2020'));   //false

//匹配的是：以数字结尾的字符串
let reg = /\d$/;  
console.log(reg.test('name')); //false
console.log(reg.test('2020name'));  //false
console.log(reg.test('name2020'));  //true

// ^/$两个都不加匹配的是：字符串中包含符合规则的内容即可
let reg1 = /\d/;
//^/$两个都加匹配的是：字符串只能是和规则一致的内容
let reg2 = /^\d$/

案例加强

需求：验证手机号码（11位，第一个数字是1，第二位是3-9）

//含义就是以1开头，第二个数字为3-9中的任意一个数字，其余9位随意数字（注意：必须写结尾，如果不写结尾长度大于9也是返回true可以匹配的）
let reg = /^1[3-9]\d{9}$/;

2. \

• \：转义字符
• .：除\n之外的任意数字
  例子

// 匹配的是：以2开头 以3结尾 中间是出来换行之外的任意字符
let reg = /^2.3$/;
console.log(reg.test('2.3')); //true
console.log(reg.test('2@3')); //true
console.log(reg.test('23')); //false

// 匹配的是：以2开头 以3结尾 中间是小数点
//=》也就是匹配2.3 这里的‘.’转义为了普通的‘.’
let reg = /^2.3$/;
console.log(reg.test('2.3')); //true
console.log(reg.test('2@3')); //false

案例加强

需求：匹配字符串‘\ \d’,设计到了\的转义 (注意：在字符串中也有一些特殊意义的，他们也是需要转义的。比如\n在字符串中不是字符串\n而是换行)。因此对于此题的需求‘ \ \d’,代表的是需要匹配一个\和一个d

let str = '\\d',
    reg = /^\\d$/;
console.log(reg.test(str));

3. x|y

• x|y：x或y
• ()：分组或提高优先级

直接x|y会存在很乱的优先级问题，一般我们写的时候都伴随着小括号进行分组，因为小括号改变处理的优先级 => 小括号：分组

例子

//匹配的是：以18开头或者以29结尾的都可以
//以下的匹配结果都为true
let reg = /^18|29$/;
console.log(reg.test('18'));
console.log(reg.test('29'));
console.log(reg.test('129'));
console.log(reg.test('189'));
console.log(reg.test('1829'));
console.log(reg.test('182'));

//匹配的是：18或者29中的一个
let reg = /^(18|29)$/;
console.log(reg.test('18'));
console.log(reg.test('29'));
console.log(reg.test('129'));
console.log(reg.test('189'));
console.log(reg.test('1829'));
console.log(reg.test('182'));

4.[]

• 中括号出现的字符一般都代表本身的含义（特殊字符就是代表一个普通的符号：‘.’就是代表‘.’，而不是代表除换行之外的任意字符了）
• 中括号中不存在多位数

例子

//匹配的含义是：只能是@或者+的
let reg = /^[@+]$/;
console.log(reg.test('@')); //true
console.log(reg.test('+')); //true
console.log(reg.test('@@')); //false
console.log(reg.test('@+')); //false

//匹配的含义是：\d还是代表0-9
let reg = /^[\d]$/;
console.log(reg.test('9')); //true
console.log(reg.test('\\')); //false
console.log(reg.test('d')); //false

//匹配的含义是：1或者8
let reg = /^[18]$/;
console.log(reg.test('1')); //true
console.log(reg.test('8')); //true
console.log(reg.test('18')); //false

//匹配的含义是：1或者0-2或者9
let reg = /^[10-29]$/;
//匹配的含义是：1或者0-2或者9或(或)
let reg = /^[(10-29)]$/;

三、常用的正则表达式

3.1 验证是否为有效数字

规则分析：

• 1.可能出现+ -号、也可能不出现，但是出现也是只有一个；
• 2.整数位是一位的时候可以是0-9，多位的时候首位不能是0；
• 3.小数部分可能有也可能没有，一旦有后面必须有一位：小数点+数字

/^[+-]?(\d|([1-9]\d+))(\.\d+)?$/

3.2 验证密码

规则分析

• 数字、字母、下划线
• 6~16位

///使用常规的写法（不用正则）
let val= userPass.value;
function check(val){
  if(val.length>16 || val.length<6){
    alert('长度不符合');
    return;
  }
  let area = ['a','b',...'_'];//数字，字母、下划线
  for(let i = 0;i<val.length;i++){
    let char = val[i];
    if(!area.includes(char)){
      alert('必须包含数字字母下划线');
      return;
    }  
  }
}

//使用正则验证
/^\w{6~16}$/

3.3验证真实姓名

规则：

• 1.汉字：/¹$/;
• 2.名字长度2-10位；
• 3.可能有译名：·汉字

//补充一个怎么打出在中间位置出现的点，哈哈，我在敲的时候也没有找到，问了度娘才知道：
//中文状态下，ESC下面的那个键就是（中文状态中文状态中文状态，重要的事情说三遍。。。哈哈）
/^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10})?$/

3.4 验证邮箱

规则：

• 邮箱的名字以‘数字字母下划线-.’几部分组成，但是-/.不能连续出现也不能作为开头 \w+((-\w+)|(.\w+))*;
• @ 后面可以加数字字母，可以出现多位 @[A-Za-z0-9]+ ;
• 对@后面名字的补充：多域名 .com.cn ;企业域名 (.|-)[A-Za-z0-9]+)*
• .com/.cn等域名 .[A-Za-z0-9]+

/^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/

3.5 身份证号

规则

• 18位
• 最后一位是数字或者X
• 前6位是省市县
• 后四位是年
• 后两位是月 01-12
• 后两位是日 01-31
• 最后四位
• 最后一位：X或者数字
• 倒数第二位：偶数：女 奇数：男
  小括号分组的作用：分组捕获，不仅可以把大正则匹配信息捕获到，还可以单独捕获到每个小分组的内容

/^([1-9]\d{5})((19|20)\d{2})([1-9]|10|11|12)([1-9]|[1-2]\d|30|31)\d{3}(\d|x)$/i

以上就是使用正则中元字符的具体使用情况和项目中使用到的场景，可能不是特别全，写的不是特别细，但是小编也在努力学习中，提高知识的层次上，文学能力也在提高 （咳咳！上学的时候语文就学的不咋样，可能我就是理工科中那个学习不怎么样，但是理科生身上的那种标签却。。。哈哈，其实我们理科生偶尔也是浪漫的，不是那么的直。。。）

---

1. \u4E00-\u9FA5 ↩︎