一篇文章教你玩转正则

时间 2019-11-08

原文原文链接

首先了解什么是正则

regular expression : RegExp /ˈreɡjələr/ /ɪk'sprɛʃən/ 用来处理字符串的规则javascript

只能处理字符串

它是一个规则：能够验证字符串是否符合某个规则，也能够把字符串中符合规则的内容捕获到(test/exec/match...);

let str = 'good good study,day day up!';
=> 学正则就是用来制定规则;
let reg = /\d+/;
reg.test(str);   =>false;

str = '2019-08-12';
reg.exec(str);   =>["2019", index: 0, input: "2019-08-12", groups: undefined]
复制代码

编写正则表达式

建立方式有两种：java

=> 一、字面量建立方式两个斜杆之间包起来的，都是用来描述规则的元字符; let reg1 = /\d+/ ;正则表达式

=>二、构造函数模式建立
两个参数：元字符字符串，修饰符字符串； let reg2 = new RegExp('\\d+');算法

正则表达式由两个部分组成

元字符
修饰符

经常使用的元字符

一、量词元字符:设置出现的次数

* 表示0次或者屡次，等同于{0,}，即c* 和c{0,} 是一个意思。

+ 表示一次或者屡次，等同于{1,}，即c+ 和c{1,} 是一个意思。最后;

？表示0次或者1次，等同于{0,1}，即c? 和c{0,1} 是一个意思。；

{n} 出现n次;

{n,} 出现n 到屡次

{n,m} 出现n到m次数；

二、特殊元字符：单个或者组合在一块儿表明特殊的含义;

\ 转译字符(普通->特殊->普通)

. 除\n (换行符)之外的任意字符；

^ 以哪个元字符做为开始;

$ 以哪个元字符做为结束;

\n 换行符；

\d 0~9之间的一个数字；

\D 匹配一个非数字字符。等价于 ^0-9；

\w 数字、字母、下划线中任意一个字符；

\s 一个空白字符(包含空格、制表符、换页符等)

\t 一个制表符(一个TAB键：四个空格);

\b 边界符; 匹配一个单词边界，也就是指单词和空格间的位置。例如， 'er\b' 能够匹配"never" 中的 'er'，但不能匹配 "verb" 中的 'er'。

x|y x或者y中的一个字符;

[xyz] x或者y或者z中的一个字符;

[^xy] 除了x、y之外的任意字符;

[a-z]指定a-z这个范围中的任意字符 [0-9a-zA-Z_]=== \w

[^a-z] 上一个的取反“非”；

() 正则中的分组符号；

(?:) 只匹配不捕获

(?=) 正向预查

(?!) 负向预查

三、普通元字符
- /hahaha/ 此正则匹配的=> "hahaha"

经常使用修饰符

i => ignoreCare 忽略单词大小写匹配；express

m =>multiline 能够进行多行匹配;数组

g => global 全局匹配bash

/A/.test('lalala') =>falseide

/A/i.test('lalala') =>true函数

元字符详细解析

^ $ui

^/$ 两个都不加:字符串中包含符合规则的内容便可；

let str = '146576567djkljkljl6787897'`
let reg1 = /\d+/;`只要有数字就能够了)

reg1.test(str)  // true
复制代码

^/$ 两个都加:字符串只能是和规则一致的内容;

let reg2 = /^\d+$/;（从头至尾必须所有都是数字）

reg2.test(str) // false
复制代码

例子：验证手机号码(11位，第一个数字是1既可);

let reg = /^1\d{10}$/;

let reg = /^\d/; 

reg.test('world');     =>false
reg.test('2019world');   =>ture
reg.test('world2019');   =>false

let reg = /\d$/;
reg.test('world');     =>false
reg.test('2019world');   =>false
reg.test('world2019');   =>ture
复制代码

\ .不是小数点，是除\n外的任意字符

let reg = /^2.3$/;
console.log(reg.test("2.3"));//=>true
console.log(reg.test("2@3"));//=>true
console.log(reg.test("23"));//=>false

//=>基于转义字符，让其只能表明小数点
reg = /^2\.3$/;
console.log(reg.test("2.3"));//=>true
console.log(reg.test("2@3"));//=>false

let str = "\\d";
reg = /^\d$/; //=>\d表明0-9的数字
console.log(reg.test(str)); //=>false
reg = /^\\d$/; //=>把特殊符合转换为普通的(\把\d中的\转移成\自己=> 只能是 \d)
console.log(reg.test(str)); //=>true
复制代码

x|y

let reg = /^18|29$/;  // => 以1开头 9 结尾  =>中间是8或者2 // 以18开头 29结尾均可以，条件不少
console.log(reg.test("18")); //=>true
console.log(reg.test("29")); //=>true
console.log(reg.test("129")); //=>true
console.log(reg.test("189")); //=>true
console.log(reg.test("1829")); //=>true
console.log(reg.test("829")); //=>true
console.log(reg.test("182")); //=>true
//---直接x|y会存在很乱的优先级问题，通常咱们写的时候都伴随着小括号进行分组，由于小括号改变处理的优先级 =>小括号：分组
reg = /^(18|29)$/;
console.log(reg.test("18")); //=>true
console.log(reg.test("29")); //=>true
console.log(reg.test("129")); //=>false
console.log(reg.test("189")); //=>false
//=>只能是18或者29中的一个了
复制代码

[]

//1.中括号中出现的字符通常都表明自己的含义;
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
reg = /^[\d]$/; 
console.log(reg.test("d"));//=>false
console.log(reg.test("\\"));//=>false
console.log(reg.test("9"));//=>true

//2.中括号中不存在多位数
reg = /^[18]$/;
console.log(reg.test("1")); //=>true
console.log(reg.test("8")); //=>true
console.log(reg.test("18")); //=>false

reg = /^[10-29]$/; //=>1或者0-2或者9
console.log(reg.test("1"));//=>true
console.log(reg.test("9"));//=>true
console.log(reg.test("0"));//=>true
console.log(reg.test("2"));//=>true
console.log(reg.test("10"));//=>false
复制代码

经常使用的正则表达式

一、验证是否为有效数字

/* * 规则分析 * 1.可能出现 + - 号，也可能不出现 [+-]? * 2.一位0-9均可以，多位首位不能是0 (\d|([1-9]\d+)) * 3.小数部分可能有可能没有，一旦有后面必须有小数点+数字 (\.\d+)? */
let reg = /^[+-]?(\d|([1-9]\d+))(\.\d+)?$/;·
复制代码

二、验证密码

//=>数字、字母、下划线
//=>6~16位
let val = userPassInp.value,
    reg = /^\w{6,16}$/;
let flag=reg.test(val);

/*
function checkPass(val){
    if(val.length<6 || val.length>16){
    	alert('长度必须介于6-16位之间！');
    	return;
	}
    let area=['a','b'....'_']; //=>包含数字、字母、下划线
    for(let i=0;i<val.length;i++){
        let char=val[i];
        if(!area.includes(char)){
            alert('格式不正确！');
    		return;
        }
    }
}
*/
复制代码

三、验证真实姓名的

* 1.汉字  /^[\u4E00-\u9FA5]$/
 * 2.名字长度 2~10位
 * 3.可能有译名 ·汉字  (·[\u4E00-\u9FA5]{2,10}){0,2}
 */
let reg = /^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10}){0,2}$/;
复制代码

四、验证邮箱的

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

//=> \w+((-\w+)|(\.\w+))*
	1.开头是数字字母下划线（1到多位）
	2.还能够是 - 数字字母下划线 或者 .数字字母下划线,总体零到屡次
//=>邮箱的名字由“数字、字母、下划线、-、.”几部分组成，可是-/.不能连续出现也不能做为开始;

/^\w+/

//=> @[A-Za-z0-9]+
//1.@后面紧跟着：数字、字母 （1-多位）

//=> ((\.|-)[A-Za-z0-9]+)*
//1.对@后面名字的补充
// 多域名     .com.cn
// 企业邮箱    zxt@zhufeng-peixun-office.com

//=> \.[A-Za-z0-9]+
//1. 这个匹配的是最后的域名（.com/.cn/.org/.edu/.net...）
复制代码

五、身份证号码

/*
 * 1. 一共18位
 * 2. 最后一位多是X
 *
 * 身份证前六位：省市县  130828
 * 中间八位：年月日
 * 最后四位：
 *   最后一位 => X或者数字
 *   倒数第二位 => 偶数 女  奇数 男
 *   其他的是通过算法算出来的
 */
//let reg = /^\d{17}(\d|X)$/;
//=>小括号分组的第二个做用：分组捕获，不只能够把大正则匹配的信息捕获到，还能够单独捕获到每一个小分组的内容
let reg = /^(\d{6})(\d{4})(\d{2})(\d{2})\d{2}(\d)(\d|X)$/;
reg.exec("130828199012040617"); //=>["130828199012040617", "130828", "1990", "12", "04", "1", "7"...] 捕获结果是数组，包含每个小分组单独获取的内容
复制代码

正则两种建立方式的区别

构造函数由于传递的是字符串，\须要写两个才表明斜杠 let reg = /\d+/g;

reg = new RegExp("\\d+","g");
正则表达是中的部份内容是变量存储的值

1.两个斜杠中间包起来的都是元字符（若是正则中要包含某个变量的值，则不能使用字面量方式建立）

let type = "hahahaha";
reg = /^@"+type+"@$/;   // 以@ 开始/结束，" 出现屡次 typ e出现屡次” 
console.log(reg.test("@hahaha@")); //=>false
console.log(reg.test('@"""typeeeee"@')); //=>true
//2.这种状况只能使用构造函数方式（由于它传递的规则是字符串，只有这样才能进行字符串拼接）
reg = new RegExp("^@"+type+"@$");   // type 为变量;
console.log(reg.test("@hahahaha@"));//=>true
复制代码

正则的捕获

实现正则捕获的办法

正则RegExp.prototype上的方法
- exec
- test
字符串String.prototype上支持正则表达式处理的方法
- replace
- match
- splite
- ...

let str = "lyridel2019yangfan2020qihang2021";
let reg = /\d+/;
复制代码

正则懒惰性

基于exec实现正则的捕获

1.捕获到的结果是null或者一个数组

第一项：本次捕获到的内容

其他项：对应小分组本次单独捕获的内容

index：当前捕获内容在字符串中的起始索引

input：原始字符串

2.每执行一次exec，只能捕获到一个符合正则规则的，可是默认状况下，咱们执行一百遍，获取的结果永远都是第一个匹配到的，其他的捕获不到

=>“正则捕获的懒惰性”：默认只捕获第一个捕获的内容

懒惰性缘由

let str = "ddhwe2019yangfan2020qihang2021";

- reg.lastIndex：当前正则下一次匹配的起始索引位置 
- 懒惰性捕获的缘由：默认状况下lastIndex的值不会被修改，每一次都是从字符串开始位置查找，因此找到的永远只是第一个
let reg = /\d+/;
console.log(reg.lastIndex); //=>0 下面匹配捕获是从STR索引零的位置开始找
console.log(reg.exec(str));
console.log(reg.lastIndex); //=>0 第一次匹配捕获完成`
lastIndex没有改变，因此下一次exec依然是从字符串最开始找，找到的永远是第一个匹配到的
复制代码

懒惰性的解决办法

解决办法：全局修饰符g

可是需注意：匹配最后一次，没有以后会返回null，再匹配lastIndex为0 开始寻找

let reg = /\d+/g;
console.log(reg.exec(str)); //=>["2019"...]
console.log(reg.lastIndex); //=>11 设置全局匹配修饰符g后，第一次匹配完，lastIndex会本身修改
console.log(reg.exec(str)); //=>["2020"...]
console.log(reg.lastIndex); //=>22
console.log(reg.exec(str)); //=>["2021"...]
console.log(reg.lastIndex); //=>32
console.log(reg.exec(str)); //=>null 当所有捕获后，再次捕获的结果是null，可是lastIndex又回归了初始值零，再次捕获又从第一个开始了...
console.log(reg.lastIndex); //=>0
console.log(reg.exec(str)); //=>["2019"...]
复制代码

贪婪性

每一次捕获都按照正则匹配的最长结果捕获

let str = 'jkldjkl1234';
let reg = /\d+/g;

+ 表明1-多位,可是正则匹配只按照最长的匹配
复制代码

贪婪性解决方案

从新封装EXEC

需求：编写一个方法execAll，执行一次能够把全部匹配的结果捕获到（前提正则必定要设置全局修饰符g）

~ function () {
	function execAll(str = "") {
		//=>str:要匹配的字符串
		//=>this:RegExp的实例（当前操做的正则）
		//=>进来后的第一件事，是验证当前正则是否设置了G，不设置则不能在进行循环捕获了，不然会致使死循环
		if (!this.global) return this.exec(str);
		//=>ARY存储最后全部捕获的信息 RES存储每一次捕获的内容（数组）
		let ary = [],
			res = this.exec(str);
		while (res) {
			//=>把每一次捕获的内容RES[0]存放到数组中
			ary.push(res[0]);
			//=>只要捕获的内容不为NULL，则继续捕获下去
			res = this.exec(str);
		}
		return ary.length === 0 ? null : ary;
	}
	RegExp.prototype.execAll = execAll;
}();
let reg = /\d+/g;	
console.log(reg.execAll("DD2019@2020不少3GD")); //=> ["2019", "2020", "3"]
复制代码

//=>字符串中的MATCH方法，能够在执行一次的状况下，捕获到全部匹配的数据（前提：正则也得设置G才能够）

正则的分组捕获

//=>身份证号码
let str = "130828199012040112";
let reg = /^(\d{6})(\d{4})(\d{2})(\d{2})\d{2}(\d)(?:\d|X)$/;
console.log(reg.exec(str));
console.log(str.match(reg));
//=>["130828199012040112", "130828", "1990", "12", "04", "1", index: 0, input: "130828199012040112"]
//=>第一项：大正则匹配的结果
//=>其他项：每个小分组单独匹配捕获的结果
//=>若是设置了分组（改变优先级），可是捕获的时候不须要单独捕获，能够基于?:来处理
复制代码

//=>既要捕获到{数字}，也想单独的把数字也获取到，例如：第一次找到 {0} 还须要单独获取0
let str = "{0}年{1}月{2}日";

/* //=>不设置g只匹配一次，exec和match获取的结果一致（既有大正则匹配的信息，也有小分组匹配的信息） let reg = /\{(\d+)\}/; console.log(reg.exec(str)); console.log(str.match(reg)); //["{0}", "0",...] */

let reg = /\{(\d+)\}/g;
//console.log(str.match(reg)); //=>["{0}", "{1}", "{2}"] 屡次匹配的状况下,match只能把大正则匹配的内容获取到，小分组匹配的信息没法获取
let aryBig=[],
    arySmall=[],
    res=reg.exec(str);
while(res){
    let [big,small]=res;
    aryBig.push(big);
    arySmall.push(small);
    res=reg.exec(str);
}
console.log(aryBig,arySmall); //=>["{0}", "{1}", "{2}"] ["0", "1", "2"]
复制代码