一小时学会js正则表达式

正则表达式

regular expression : RegExp

用来处理字符串的规则

  • 只能处理字符串
  • 它是一个规则:可以验证字符串是否符合某个规则(test),也可以把字符串中符合规则的内容捕获到(exec/match…)
let str = "good good study,day day up!";
//=>学正则就是用来制定规则(是否包含数字)
let reg = /\d+/;
reg.test(str);  //false
str = "2020-07-05";
reg.exel(str); //=>["2020", index: 0, input: "2020-07-05"]

编写正则表达式

创建方式有两种

//=>字面两创建方式(两个斜杠之间包起来的,都是用来描述规则的元字符)
let reg1 = /\d+/;
//=>构造函数模式创建 两个参数:元字符字符串,修饰符字符串
let reg2 = new RegExp("\\d+");

正则表达式由两部分组成

  • 元字符
  • 修饰符
/*常用的元字符*/

//=>1.量词元字符,设置出现的次数
*     0到多次
+     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.普通元字符:代表本身含义的
/wenlong/   此正则匹配的就是 “wenlong“
/*正则表达式常用的修饰符:img*/
i => ignoreCase 忽略单词的大小写匹配
m => mutiline   可以进行多行匹配
g => global     全局匹配

/*
/A/.test('lalala')  //false
/A/i.test('lalala') //true
*/

元字符详细解析

^ $

let reg = /^\d/;
console.log(reg.test("wenlong")); //false
console.log(reg.test("2010wenlong")); //true
console.log(reg.test("wenlong2020")); //false
let reg = /\d$/;
console.log(reg.test("wenlong")); //false
console.log(reg.test("2010wenlong")); //false
console.log(reg.test("wenlong2020")); //true
//=>^/$ 两个都不加:字符串中包含符合规则的内容即可
let reg1 = /\d+/;
//=>^/$ 两个都加:字符串只能是和规则一致的内容
let reg2 = /^\d+$/;

//=> 举个例子,手机号以1开头 只能包含11位数字
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

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

//=>把特殊符号转为普通的
let str = "\d";
reg = /^\d$/;
console.log(reg.test(str)); //false

reg = /^\\d$/;
console.log(reg.test("\\d")); //true

x|y

//=>---直接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

let reg = /^(18|29)$/;  //只能是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

//=>2. \d在中括号中还是0-9
reg = /^[\d]$/;
console.log(reg.test("d"));   //false
console.log(reg.test("\\"));  //false
console.log(reg.test("9"));   //true

reg = /^[\\d]$/;
console.log(reg.test("d"));   //true
console.log(reg.test("\\"));  //true
console.log(reg.test("9"));   //false

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

reg=/^[10-29]$/;
console.log(reg.test("1"));   //true
console.log(reg.test("0"));   //true
console.log(reg.test("2"));   //true
console.log(reg.test("9"));   //true
console.log(reg.test("10"));  //false

常用的表达式

  1. 验证是否为有效数字
/*
    规则分析
    1.可能出现 + - 号,也肯能不出现
    2.一位0-9都可以,多位首位不能为0
    3.小数部分可能有可能没有,一旦有后面必须有小数点+数字
*/
0
1
12
12.5
12.0
-1
-12.5
+9
09

let reg = /^[+-]?(\d|([1-9]\d+))(\.\d+)?$/;  //简单正则
  1. 验证密码
let val = userPassInp.value;
//=>举个例子:不用正则
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;
        }
    }
}
//=>正则写法
let reg = /^\w{6,16}$/;
let flag = reg.test(val);
if(flag){alert('格式正确')}else{alert(‘格式不正确’);return;};

  1. 验证真实姓名的
/*
1.汉字 /^[\u4E00-\u9FA5]$/  中文第一个encode到最后一个
2.名字长度 2~10位
3.可能有译名  ·汉字
  exp:"弗拉基米尔·弗拉基米罗维奇·普京"
*/

let reg = /^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10}){0,2}$/;

  1. 验证邮箱的
let reg = /^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
exp: abcd@qq.com.cn

//=> \w+((-\w+)|(\.\w+))*
//1.开头是数字字母下划线(1到多位)
//2.还可以是 -数字字母下划线 或者 .数字字母下划线,整体零到多次
//邮箱的名字由“数字、字母、下划线、-、."几部分组成,但是-/.不能连续出现也不能作为开始

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

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

//=> \.[A-Za-z0-9]+
//1.这个匹配的是最后的域名(.com/.cn/.org/.edu/.net/.vip...)

  1. 身份证号码
/*
1.一共18位
2.最后一位可能是X

身份证前六位:省市县    130130
中间八位:年月日    19920914
最后四位:
    最后一位  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 = "wenlong";
reg = /^@"+type+"@$/;
console.log(reg.test("@wenlong@")); //=>false
console.log(reg.test('@""""typeeeeeee"@')); //=>true

//2.这种情况只能使用构造函数方式(因为它传递的规则是字符串,只有这样才能进行字符串拼接)
reg = new RegExp("^@"+type+"@$");
console.log(reg.test("@wenlong@")); //=>true

正则的捕获

实现正则捕获的方法

  • 正则 RegExp.prototype 上的方法
    • exec
    • test
  • 字符串 String.ptototype 上支持正则表达式处理的方法
    • replace
    • match
    • splite
let str = "wenlong2019yangfan2020qihang2021";
let reg = /\d+/;
/*
基于exec实现正则的捕获
    1.捕获到的结果是null或者一个数组
      第一项:本次捕获到的
      其余项:对应小分组本次单独捕获的内容
      index:当前捕获内容在字符串中的起始索引
      input:原始字符串
    2.每执行一次,只能捕获到一个符合正则规则的即  正则捕获的懒惰性
*/
console.log(reg.test(str)); //=>true
console.log(reg.exec(str)); //=>["2019", index: 7, input: "wenlong2019yangfan2020qihang2021"]
console.log(reg.exec(str)); //=>["2019", index: 7, input: "wenlong2019yangfan2020qihang2021"]

//=>解决捕获的懒惰性修改lastIndex:全局修饰符 exp:
let reg = /\d+/g;
console.log(reg.exec(str)); //=>["2019", index: 7, input: "wenlong2019yangfan2020qihang2021"]
console.log(reg.exec(str)); //=>["2020", index: 18, input: "wenlong2019yangfan2020qihang2021"]

//=>实现正则捕获的前提是:当前正则要和字符串匹配,如果不匹配捕获的结果是null
let reg = /^\d+$/;
console.log(reg.test(str)); //=>false
console.log(reg.exec(str)); //=>null

正则捕获懒惰性的解决办法

~ function () {
    function execAll(str = "") {
        if (!this.global) return this.exec(str);
        let ary = [],
            res = this.exec(str);
        while (res) {
            ary.push(res[0]);
            res = this.exec(str);
        }
        return ary.length === 0 ? null : ary;
    }
    RegExp.prototype.execAll = execAll;
}();
let reg = /\d+/g;
let str = "wenlong2019yangfan2020qihang2021";
// 正则添加原型方法
console.log(reg.execAll(str));

// 相当于字符串方法
console.log(str.match(reg))

正则的分组捕获

//=>身份证号码
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(reg.exec(str));
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("keep")); //=>true
console.log(reg.test("buss")); //=>false
console.log(reg.test("some")); //=>false

正则捕获的贪婪性

//=>默认情况下,正则捕获到的时候,是按照当前正则所匹配的最长结果来获取的
let str = "珠峰@2019#@2020培训";
let reg = /\d+/g;
console.log(str.match(reg)); //=>["2019","2020"]

//=>在量词元字符后面设置? 取消捕获时候的贪婪性(按照匹配的最短的结果来获取)
let reg = /\d+?/g;
console.log(str.match(reg)); //=>["2", "0", "1", "9", "2", "0", "2", "0"]

问号在正则中的五大作用

  • 问号左边是非量词元字符:本身代表量词元字符,出现零到一次
  • 问号左边是量词元字符:取消捕获时候的贪婪性
  • (?: ) 只匹配不捕获
  • (?=) 正向预查
  • (?!) 负向预查

()三大作用

  • 改变优先级
  • 分组捕获
  • 分组引用

其它正则捕获的方法

  1. 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" //=>"2" 存储的是上次捕获的结果

//=>RegExp.$1~RegExp.$9:获取当前本次正则匹配后,第一个列到九个分组的信息
  1. replace 字符串实现替换的方法(一般都是伴随正则一起使用的)
let str = "wenlong@2019|wenlong@2020";
//=>把“wenlong”替换成“珠峰”
//1.不用正则,执行一次只能替换一个
str = str.replace("wenlong","珠峰").replace("wenlong","珠峰");
console.log(str);
//2.使用正则会简单一点
str = str.replace(/wenlong/g,"珠峰");
console.log(str);
let str = "wenlong@2019|wenlong@2020";
//=>把“wenlong"替换成“wenlongxiaoxuan";
str = str.replace("wenlong","wenlongxiaoxuan").replace("wenlong","wenlongxiaoxuan"); //=>"wenlongxiaoxuanxiaoxuan@2019|wenlong@2020"
//=>每一次替换都是字符串第一个位置开始找的(类似于正则捕获的懒惰性)

//=>基于正则g可以实现
str = str.replace(/wenlong/g,"wenlongxiaoxuan");

案例:把时间字符串进行处理

let time = "2019-08-13";
//=>变为"2019年08月13日"
let reg = /^(\d{4})-(\d{1,2})-(\d{1,2})$/;

//=>这样可以实现
time = time.replace(reg,"$1年$2月$3日");
console.log(time); //=>2019年08月13日

//=>还可以这样处理[str].replace([reg],[fuction])
1.首先拿reg和time进行匹配捕获,能匹配到几次就会把传递的函数执行几次(而且是匹配一次就执行一次)
2.不仅把方法执行,而且replace还给方法传递了实参信息(和exec捕获的内容一致的信息:大正则匹配的内容,小分组匹配的信息。。。)
3.在函数中我们返回的是啥,就把当前大正则匹配的内容替换成啥

time = time.replace(reg,(big,$1,$2,$3)=>{
    //=>这里的$1,$2,$3是我们自己设置的变量
    console.log(big,$1,$2,$3);
});

time = time.replace(reg,(...arg)=>{
    let [,$1,$2,$3] = arg;
    $2.length<2?$2="0"+$2:null;
    $3.length<3?$3="0"+$3:null;
    return $1+"年"+$2+"月"+$3+"日";
})

单词首字母大写

let str = "good good study,day day up!"
let reg = /\b([a-zA-z])[a-zA-Z]*\b/g;
//=>函数被执行了六次,每一次都把正则匹配信息传递给函数
//=>每一次reg:["good","g"] ["good","g"] ["study","s"]...

str = str.replace(reg,(...flag)=>{
    let [big,$1] = flag;
    console.log(flag,$1); //=> flag大正则匹配的内容,$1自定义小分组匹配的信息
    $1 = $1.toUpperCase();
    big = big.substring(1);
    return $1+big;
})

找出字符串中出现次数最多的值

//=>数组去重方式实现
let str = "wenlongxiaoxuanzhoulaoshi";
let obj = {};
[].forEach.call(str, char => {
    if (typeof obj[char] !== "undefined") {
        obj[char]++;
        return;
    }
    obj[char] = 1;
});
let max = 1,
    res = [];
for (let key in obj) {
    let item = obj[key];
    item > max ? max = item : null;
}
for (let key in obj) {
    let item = obj[key];
    if (item === max) {
        res.push(key);
    }
}
console.log(`出现次数最多的字符是:${res},出现了${max}次`);
//=>排序加正则方式实现
let str = "wenlongxiaoxuanzhoulaoshi";
str = str.split('').sort((a, b) => a.localeCompare(b)).join('');
let ary = str.match(/([a-zA-Z])\1+/g).sort((a, b) => b.length - a.length);
console.log(ary); //=>["hhh", "uuu", "ee", "ii", "nn", "oo"zz"]
let max = ary[0].length,
    res = [ary[0].substr(0, 1)];
for (let i = 1; i < ary.length; i++) {
    let item = ary[i];
    if (item.length < max) {
        break;
    }
    res.push(item.substr(0, 1));
}
console.log(`出现次数最多的字符是:${res},出现了${max}次`);

写到最后

本文章为个人正则学习记录,纯手打,转载请注明出处。
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值