JS基础知识(七)正则

正则

正则的基础知识

什么是正则?

正则就是一个规则,用来处理字符串的规则
1、正则匹配

  • 编写一个规则,验证某个字符串是否匹配这个规则,用test方法

2、正则捕获

  • 编写一个规则,在一个字符串中,把符合规则的内容都获取到,使用方法:正则的exec方法、字符串中的split、replace、match等方法都支持正则

var reg=/^$/;//两个斜杠之间包含的内容就是正则,两个斜杠之间的全部内容都是元字符

正则的元字符和修饰符

任何一个正则都是由元字符和修饰符组成的

  • 修饰符

    • g(global):全局匹配
    • i(ignore):忽略大小写匹配
    • m(mutiline):多行匹配
  • 元字符
    [量词元字符]

    • +:让前面的元字符出现1到多次
    • :出现0到1次
    • *:出现0到多次
    • {n}:出现n次
    • {n,}:出现n到多次
    • {n,m}:出现n到m次

    [特殊意义的元字符]
    -\ :转义字符
    -.:除了\n(换行符)以外的任意字符
    -\d:匹配一个0-9的任意字符

    • \D :匹配一个非0-9的任意字符
    • \w :匹配一个[0-9a-zA-Z_]之间的任意字符
    • \s :匹配一个任意空白符
    • \b :匹配一个边界符(单词的左右,-的左右两边)
    • x|y:匹配两者中的其中一个
    • [a-z] :匹配a-z中的任意一个字符
    • [^a-z] :匹配非a-z中的任意一个字符
    • [xyz] :匹配xyz中的其中一个
    • [^xyz]:匹配除了xyz以外的任意字符
    • ():正则小分组
    • ^:以某一个元字符开始
    • $ :以某一个元字符结束
    • : 只匹配不捕获
    • ?=:正向预查
    • ?! :负向预查
var reg=/^\d$/;
//说明以数字开头,以数字结尾 ,且只包含一个数字
var reg=/^2.3$/;//.代表除了\n以外的任意字符
reg.test(2.3); true
var reg=/^18|19$/;// x|y的情况
// 18或19
// 以1开头以9结尾,中间是8或1
// 以18开头或以19结尾
//
var reg=/^(18|19)$/;//18或19
//()正则里的分组,大正则里的小分组,我们可以使用它改变默认的优先级
//此时只有18或者19符合规则

()

  • ()正则里的分组,大正则里的小分组,我们可以使用它变默认的优先级
  • 小分组还有第二个作用:分组引用
  • 小分组第三个作用: 分组捕获

分组引用:\1 表示出现和第1个分组一模一样的字符

var reg=/^([a-z])([a-z])\2(a-z)$/;// 类似于food week feel oppo等都符合该正则

[ ]

[xyz] [^xyz] [^a-z]
var reg=/^[a-zA-Z0-9_]$/;//等同于\w
[ ]中出现的元字符,一般都代表本身的含义var reg=/^[.?+]$/里面的.代表.本身
//需求类的命名规则:数字字母下划线 _,(-不能作为开头)
var reg=/^\w[\w-]*$///不要让-出现在中间就可代表其本身的含义,出现在中间表示范围链接符

var reg=/^[18-65]$/代表的意思:1或8~6或5中的任意一个字符 ,中括号出现的18不代表数字18而是1或者8,当前正则非法
18-65岁份三阶段
18~19 (18|19)
20~59([2-5]\d)
60~65(6[0-5])

验证是否为有效数字

可能正数,可能是负数
整数或小数
只要出现小数点,后面至少出现一位
小数点前必须有数字
var reg=/^-?(\d|([1-9]\d+)(\.\d+)?$/

电话号码

var reg=/^1\d{10}$/

中文姓名

 /^[\u4E00-\u9FA5]$/ :中文汉字的正则
var reg = /^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10})?$/;
尼古拉斯·王武

邮箱

reg=/^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/
分析需求:
* 以数字字母下划线开头
* @前面可以是 数字、字母、下划线、-、. 这些符号
* 不能把 -和. 连续出现,出现一次后面必须跟数字字母下划线
*
* @后面的部分支持
* 企业邮箱
* .com.cn 多域名情况
*/
//这样写不仅可以匹配,而且以后捕获的时候,不仅可以把大正则匹配的结果捕获到,里面的每一个小分组也可以分别捕获到"分组捕获"

身份证号

var reg=/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{2})(\d)(X|\d)$/

正则捕获

把当前字符串中的符合规则的字符捕获到
RegExp.prototype.exec实现正则捕获的方法
当我们执行reg.exec(str)的时候,

  • 1、先去验证当前字符串和正则是否匹配,如果不匹配则返回结果null;
  • 2、如果匹配,从字符串最左边开始,向右查找匹配内容,并把匹配内容返回

exec捕获到的结果的格式:
获取的是一个数组
数组中的第一项是当前本次大正则匹配的结果
index:记录了本次捕获到结果的起始的索引
input:当前正则操作的原始字符串
如果当前正则当中有分组,获取的数组中,从第二项开始,都是每个小分组
执行一次exec只能把符合正则规则的一个内容捕捉到,若果还有其他符合规则的, 需要再次执行exec才有可能捕获到;

正则捕获的懒惰性

正则为什么会存在懒惰性

正则本身有一个属性:lastIndex(下一次正则在字符串匹配查找时的开始索引)
默认值:0,从字符串的第一个字符开始查找匹配的内容
默认不管执行多少次exec,正则的lastIndex值都不会变,也就是还是从第一个字符开始查找
并且当我们手动改变last Index的值时,不会起任何作用
由此导致:执行一次exec捕获到第一个符合规定的内容,第二次执行exec,捕获到的依然是第一个匹配内容,后面的无论执行多少次都捕获不到

解决正则的懒惰性

在正则的末尾加修饰符g(全局匹配)
加了修饰符g,每次exec结束后,浏览器会默认把lastIndex的值进行修改,下一次从上一次结束的位置开始查找,所以可以得到后面匹配的内容了

var reg=/\d+/g;//开启全局匹配

exec有自己的局限性,执行一次exec只能捕获到一个结果,如果想要全部捕获到,就要执行多次,下面封装的myExecAll方法,可以将正则匹配的全部内容捕获到

RegExp.prototype.myExecAll=function(){
//this 是当前需要处理的正则
//str是当前需要处理的字符串
var str=agruments[0]||'';
var result=[];
//首先判断是否加了全局修饰符G,如果没有加,我们直接将第一次的结果返回即可
if(!this.global){
return this.exec(str);
}
var ary=this.exec(str);
while (ary){//(等同于ary!==null:可以捕获到内容,我们继续下一次捕获
result.push(ary[0]);//第一项为匹配到的结果
ary=this.exec(str);//继续执行下一次捕获
}
return result;
};

使用字符串中的match实现捕获

使用字符串match捕获,

  • 如果正则加了g,会捕获到所有匹配结果
  • 如果不加g,则只会捕获到第一个匹配结果

match的局限性

  • 在加了修饰符g的情况下,·执行match只会把大正则匹配的结果捕获到,对于小分组里的匹配结果会自动忽略·

使用test实现捕获

不管是正则的匹配还是捕获,在处理的时候是没有区别的,从字符串里的第一个字符开始查找符合规则的字符,如果可以找到,则返回true,exec捕获返回捕获的内容,如果没有找到,test返回false,exec捕获返回null

如果正则设置了修饰符g,不管是使用test还是exec的任何方法,都会改变lastIndex值,(下一次查找是基于上一次匹配结果向后查找的)

var str='my name is {0}~~';s
var reg=/\{(\d+)\}/g;
if(reg.test(str)){//->lastIndex=0
console.log(reg.exec(str));//->null lastIndex值被修改,向后查找,无匹配
}

test不仅可以找到匹配的内容,也肯能将匹配的内容获取

console.log(RegExp.$1);//获取当前匹配内容的第1个小分组;

所有支持正则的方法,都可以实现字符串的捕获(一般都是字符串方法)

字符串中常见的支持正则的方法

match
split
var str=’name=”珠峰”&age=8’;
str.split(/(&|=)/); //使用split进行字符串进行拆分的时候,如果正则包含小分组,会把小分组的内容捕获到,放在最后的数组中
//本案例()只是为了改变优先级,但我们只想匹配不想捕获分组里的内容,?:可以解决
str.split(/?:(&|=)/);// 这样浏览器就不会把小分组的内容捕获到;
要计算是第几个分组,从左到右数( =>半括号即可
replace

字符串中原有字符的替换
str.replace(old,new)

var str='珠峰2011珠峰1021';
str=str.replace('珠峰','珠峰培训');
str.replace(/珠峰/g,'珠峰培训');

在不使用正则的情况下,执行一次replace只能替换一个原有字符,第二次执行replace,依旧是从第一个字符开始查找,类似于正则的懒惰性

工作中,replace都是和正则一起搭配使用
replace原理:

  • 当replace方法执行,第一项传递一个正则
  • 正则不加g,把当前第一个字符串中和正则匹配的内容捕获到,替换成新字符
  • 正则加g,把当前所有和正则匹配的内容都捕获到,并替换成新字符

当replace执行,第二次参数传递的是一个函数(回调函数)

  • 首先用正则在字符串中进行匹配,匹配到一个符合规则的,就把传递的函数执行一次
  • 不仅执行这个函数,还把正则本次捕获的结果(同执行exec捕获的结果,包含小分组)当做实参传递给这个函数(这样就可以在函数中获得这些值,这些值就是正则每一次捕获的结果)

正则捕获方法统计

方法名 不加g 加g
exec 懒惰性,只能到捕获第一个匹配值包括小分组 多次捕获可得所有匹配字符,包括小分组
match 懒惰性 同上 一次捕获到所有匹配字符,但不能匹配到小分组
test 懒惰性同上 多次捕获可得全部内容,每执行一次test,就console.log(RegExp.$1),可得当前匹配字符
replace 懒惰性,只替换一个 全部替换
正则案例

=>单词首字母大写

var str='my name is zhu-feng-pei-xun,i am 8 years old,i am qian duan pei xun no1!';
//先把混淆边界符的-替换为下划线
str=str.replace(/-/g,_);
//通过边界符匹配到每个单词
str=str.replace(/\b(\w)(\w*)\b/g,function(){
console.log(agruments);
return agruments[1].toUpperCase()+agruments[2];

})
str=str.replace(/_/g,-);
var str='2017-11-07 16:30';//改写成2017年11月07日16时30分
//replace

模板匹配()

var  template='{0}年{1}月{2}日 {3}时{4}分{5}秒';
var reg=/\d+/g;
var ary=str.match(reg)
var str='2017-11-07 16:30';
//先将str的有效数字匹配出来,得到一个数组(match)
//其次 将template中的{0}与之数组对应索引替换(/\{(\d)\});
var template=template.replace((/\{(\d)\}),function(){
var index=arguments[1];//有多少个匹配的字符串,函数就会被执行多少次,这是每次匹配的小分组,即0/1/2...
var value=ary[index];//将数组中对应索引的值拿出来
return value;
})

正则创建方式

字面量方式

var reg=/\d+/img;

构造函数创建

new RegExp('元字符''修饰符')  
var reg= new RegExp('\\d+''g');
//将一个\换成\\才是转义字符的意思,''里面放的都是字符串

构造函数可以动态加入一个变量的值

问号传参(面试题)

let url = 'http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e';
//实现方法
String.prototype.myQueryURLParameter = function myQueryURLParameter() {
let reg = /[?&]([^?&=]+)(?:=([^?&=]*))?/g,
obj = {};
this.replace(reg, (...arg) => {
let [, key, value] = arg;
obj[key] = value;
})
return obj;
};
//方法调用
let result = url.myQueryURLParameter();
=》{ a: '1', b: '2', c: '', d: 'xxx', e: undefined }
坚持原创技术分享,您的支持将鼓励我继续创作!