一、正则表达式(regular expression : RegExp)
用来处理字符串的规则：
- 只能处理字符串
- 它是一个规则：可以验证字符串是否符合某个规则（test），也可以把字符串中符合规则的内容捕获到（exec / match...）
- 编写正则表达式，创建方式有两种：
//=>字面量创建方式（两个斜杠之间包起来的，都是用来描述规则的元字符）
let reg1 = /\d+/;
//=>构造函数模式创建 两个参数：元字符字符串，修饰符字符串
let reg2 = new RegExp("\\d+");
正则表达式由两部分组成：
- 元字符
- 修饰符
/*常用的元字符*/
//=>1、量词元字符：设置出现的次数
* 零到多次
+ 一到多次
？ 零次或者一次
{n} 出现n次
{n,} 出现n到多次
{n,m} 出现n到m次
//=>2、特殊元字符：单个或者组合在一起代表特殊的含义
\ 转义字符（普通->特殊->普通）
. 除\n（换行符）以外的任意字符
^ 以哪一个元字符作为开始
$ 以哪一个元字符作为结束
\n 换行符
\d 0~9之间的一个数字
\D 非0~9之间的一个数字（大写和小写的意思是相反的）
\w 数字、字母、下划线中的任意一个字符
\s 一个空白字符（包含空格、制表符、换页符等）
\t 一个制表符（一个TAB键：四个空格）
\b 匹配一个单词的边界
x|y x或者y中的一个字符
[xyz] x或者y或者z中的一个字符
[^xy] 除了x/y以外的任意字符
[a-z] 指定a-z这个范围中的任意字符 [0-9a-zA-Z_] === \w
[^a-z] 上一个的取反“非”
() 正则中的分组符号
(?:) 只匹配不捕获
(?=) 正向预查
(?!) 负向预查
//=>3、普通元字符：代表本身含义的
/haha/ 此正则匹配的就是 "haha" 这个字符串
/*正则表达式常用的修饰符：img*/
i =>ignoreCase 忽略单词大小写匹配
m =>multiline 可以进行多行匹配
g =>global 全局匹配
/* 例题：
/A/.test('lalala') =>false
/A/i.test('lalala') =>true
*/
二、元字符详细解析（ ^ $）
let reg = /^\d/;
console.log(reg.test("zhu")); //=>false
console.log(reg.test("2019zhu")); //=>true
console.log(reg.test("zhu2019")); //=>false
let reg = /\d$/;
console.log(reg.test("zhu")); //=>false
console.log(reg.test("2019zhu")); //=>false
console.log(reg.test("zhu2019")); //=>true
//=>^/$两个都不加：字符串中包含符号规则的内容即可
let reg1 = /\d+/;
//=>^/$两个都加：字符串只能是和规则一致的内容
let reg2 = /^\d+$/;
//=>举个例子：验证手机号码（11位，第一个数字是1即可）
let reg = /^1\d{10}$/;
/ 转义字符
//=>.不是小数点，是除\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$/; //=>把特殊符合转换为普通的
console.log(reg.test(str)); //=>true
x|y
let reg = /^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
console.log(reg.test("1829")); //=>false
console.log(reg.test("829")); //=>false
console.log(reg.test("182")); //=>false
//=>只能是18或者29中的一个了
[ ]
//1、中括号中出现的字符一般都代表本身的含义
let reg = /^[@+]+$/;
console.log(reg.test("@@")); //=>true
console.log(reg.test("@+")); //=>true
reg = /^[@+]$/;
console.log(reg.test("@")); //=>true
console.log(reg.test("+")); //=>true
console.log(reg.test("@@")); //=>false
console.log(reg.test("@+")); //=>false //因为只有一位
reg = /^[\d]$/; //=>\d在中括号中还是0-9
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.还可以是 -数字字母下划线 或者 .数字字母下划线,整体零到多次
//=>邮箱的名字由“数字、字母、下划线、-、.”几部分组成，但是-/.不能连续出现也不能作为开始
//=> @[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 = "zhu";
reg = /^@"+type+"@$/;
console.log(reg.test("@zhu@")); //=>false
console.log(reg.test('@"""typeeeee"@')); //=>true
//2.这种情况只能使用构造函数方式（因为它传递的规则是字符串，只有这样才能进行字符串
拼接）
let type = "zhu";
reg = new RegExp("^@"+type+"@$");
console.log(reg.test("@zhu@"));//=>true
五、正则的捕获
- 实现正则捕获的办法（正则RegExp.prototype上的方法）
- exec
- test
- 字符串String.prototype上支持正则表达式处理的方法
- replace
- match
- splite
- .......
let str = "zhu2019yangfan2020qihang2021";
let reg = /\d+/;
//=>实现正则捕获的前提是：当前正则要和字符串匹配，如果不匹配捕获的结果是null
let reg = /^\d+$/;
console.log(reg.test(str)); //=>false
console.log(reg.exec(str)); //=>null
/*
* 基于exec实现正则的捕获：
* 1.捕获到的结果是null或者一个数组
* 第一项：本次捕获到的内容
* 其余项：对应小分组本次单独捕获的内容
* index：当前捕获内容在字符串中的起始索引
* input：原始字符串
* 2.每执行一次exec，只能捕获到一个符合正则规则的，但是默认情况下，我们执行
一百遍，获取的结果永远都是第一个匹配到的，其余的捕获不到
* =>“正则捕获的懒惰性”：默认只捕获第一个
*/
console.log(reg.exec(str));
//=>["2019", index: 7, input: "zhu2019yangfan2020qihang2021"]
console.log(reg.exec(str)); //=>["2019"...]
懒惰性的解决办法
let str = "zhu2019yangfan2020qihang2021";
/*
* reg.lastIndex：当前正则下一次匹配的起始索引位置
* 懒惰性捕获的原因：默认情况下lastIndex的值不会被修改，每一次都是从字符串开始
位置查找，所以找到的永远只是第一个
* 解决办法：全局修饰符g
*/
// let reg = /\d+/;
// console.log(reg.lastIndex); //=>0 下面匹配捕获是从STR索引零的位置开始找
// console.log(reg.exec(str));
// console.log(reg.lastIndex); //=>0 第一次匹配捕获完成，lastIndex没有改变，所
以下一次exec依然是从字符串最开始找，找到的永远是第一个匹配到的
// 解决方法：
// 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"...] 便循环起来了
// 缺点：基于TEST匹配验证后，LASTINDEX已经被修改为第一次匹配后的结果，所以下一次捕获不再从头开始了
// let reg = /\d+/g;
// if (reg.test(str)) {
// //=>验证一下:只有正则和字符串匹配我们在捕获
// console.log(reg.lastIndex); //=>11
// console.log(reg.exec(str)); //=>["2020"...]
// }
六、正则的分组捕获
//=>身份证号码
let str = "130828199012040112";
let reg = /^(\d{6})(\d{4})(\d{2})(\d{2})\d{2}(\d)(?:\d|X)$/;
console.log(reg.exec(str));
//=>["130828199012040112", "130828", "1990", "12", "04", "1", index: 0, input: "130828199012040112"]
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));//["{0}", "0",...]
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"]
let str = "book"; //=>"good"、"look"、"moon"、"foot"...
let reg = /^[a-zA-Z]([a-zA-Z])\1[a-zA-Z]$/;
//=>分组引用就是通过“\数字”让其代表和对应分组出现一模一样的内容
console.log(reg.test("book")); //=>true
console.log(reg.test("deep")); //=>true
console.log(reg.test("some")); //=>false
七、正则捕获的贪婪性
let str = "珠2019@2020haha";
//=>正则捕获的贪婪性：默认情况下，正则捕获的时候，是按照当前正则所匹配的最长结果来获取的
let reg = /\d+/g;
console.log(str.match(reg)); //=>["2019","2020"]
//=>在量词元字符后面设置？：取消捕获时候的贪婪性（按照正则匹配的最短结果来获取）
reg = /\d+?/g;
console.log(str.match(reg)); //=>["2", "0", "1", "9", "2", "0", "2", "0"]
问号在正则中的五大作用：
- 问号左边是非量词元字符：本身代表量词元字符，出现零到一次
- 问号左边是量词元字符：取消捕获时候的贪婪性
- (?:) 只匹配不捕获
- (?=) 正向预查
- (?!) 负向预查
八、其它正则捕获的方法
- test也能捕获（本意是匹配）
let str = "{0}年{1}月{2}日";
let reg = /\{(\d+)\}/g;
console.log(reg.test(str)); //=>true
console.log(RegExp.$1); //=>"0"
console.log(reg.test(str)); //=>true
console.log(RegExp.$1); //=>"1"
console.log(reg.test(str)); //=>true
console.log(RegExp.$1); //=>"2"
console.log(reg.test(str)); //=>false
console.log(RegExp.$1); //=>"2" 存储的是上次捕获的结果
//=>RegExp.$1~RegExp.$9：获取当前本次正则匹配后，第一个到第九个分组的信息
- replace 字符串中实现替换的方法（一般都是伴随正则一起使用的）
let str = "zhu@2019|zhu@2020";
//=>把"zhu"替换成"珠"
//1.不用正则，执行一次只能替换一个
/*
str = str.replace("zhu","珠").replace("zhu","珠");
console.log(str); //"珠@2019|珠@2020"
*/
//2.使用正则会简单一点
str = str.replace(/zhu/g,"珠");
console.log(str);//"珠@2019|珠@2020"
let str = "zhu@2019|zhu@2020";
//=>把"zhu"替换为"zhuhaha"
//str=str.replace("zhu","zhuhaha").replace("zhu","zhuhaha");
//"zhuhaha@2019|zhuhaha@2020" 每一次替换都是从字符串第一个位置开始找的（类似于正则捕获的懒惰性）
//=>基于正则g可以实现
str = str.replace(/zhu/g,"zhuhaha");
