上一篇文章介绍了正则的用处以及正则中这些元字符的基本含义，但是如果我们只知道那些元字符的含义，不知道怎么使用和加以练习，那么对于正则我们还只是看见了门槛，并没有踏入，那么本篇文章就让我们迈起脚步正式走入正则的世界吧。let’s go!
我的学习方式是：记忆元字符的含义 + 例子消化 + 案例练习
首先：咱们的思维导图来喽
关于这两个方法的具体介绍，会在下一篇文章中介绍，本文章的主要内容是元字符的具体含义、使用
重点来喽，搬好小板凳，准备好好听课，咳咳咳！
- ^：以那个元字符开头
- $：以那个元字符结尾
- \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}$/;
- \：转义字符
- .：除\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));
- 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'));
- 中括号出现的字符一般都代表本身的含义（特殊字符就是代表一个普通的符号：‘.’就是代表‘.’，而不是代表除换行之外的任意字符了）
- 中括号中不存在多位数
例子
//匹配的含义是：只能是@或者+的
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)]$/;
规则分析：
- 1.可能出现+ -号、也可能不出现，但是出现也是只有一个；
- 2.整数位是一位的时候可以是0-9，多位的时候首位不能是0；
- 3.小数部分可能有也可能没有，一旦有后面必须有一位：小数点+数字
/^[+-]?(\d|([1-9]\d+))(\.\d+)?$/
规则分析
- 数字、字母、下划线
- 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}$/
规则：
- 1.汉字：/1$/;
- 2.名字长度2-10位；
- 3.可能有译名：·汉字
//补充一个怎么打出在中间位置出现的点，哈哈，我在敲的时候也没有找到，问了度娘才知道：
//中文状态下，ESC下面的那个键就是（中文状态中文状态中文状态，重要的事情说三遍。。。哈哈）
/^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10})?$/
规则：
- 邮箱的名字以‘数字字母下划线-.’几部分组成，但是-/.不能连续出现也不能作为开头 \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]+$/
规则
- 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
以上就是使用正则中元字符的具体使用情况和项目中使用到的场景，可能不是特别全，写的不是特别细，但是小编也在努力学习中，提高知识的层次上，文学能力也在提高 （咳咳！上学的时候语文就学的不咋样，可能我就是理工科中那个学习不怎么样，但是理科生身上的那种标签却。。。哈哈，其实我们理科生偶尔也是浪漫的，不是那么的直。。。）
\u4E00-\u9FA5 ↩︎