阅读 35

元字符的详细解析

上一篇文章介绍了正则的用处以及正则中这些元字符的基本含义,但是如果我们只知道那些元字符的含义,不知道怎么使用和加以练习,那么对于正则我们还只是看见了门槛,并没有踏入,那么本篇文章就让我们迈起脚步正式走入正则的世界吧。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.汉字:/^[\u4E00-\u9FA5]$/;
  • 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
复制代码

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

关注下面的标签,发现更多相似文章
评论