5. 一篇文章带你玩转正则

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

  • 只能处理字符串
  • 它是一个规则:可以验证字符串是否符合某个规则,也可以把字符串中符合规则的内容捕获到(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]

编写正则表达式

创建方式有两种:

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

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

  • 元字符

  • 修饰符

常用的元字符

  • 1、量词元字符:设置出现的次数
  • * 表示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次数;
  • 2、特殊元字符:单个或者组合在一起代表特殊的含义;
  • \ 转译字符(普通->特殊->普通)
  • . 除\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] 上一个的取反“非”;
  • () 正则中的分组符号;
  • (?:) 只匹配不捕获
  • (?=) 正向预查
  • (?!) 负向预查
  • 3、普通元字符
  • /hahaha/ 此正则匹配的=> "hahaha"

常用修饰符

i => ignoreCare 忽略单词大小写匹配;
m =>multiline 可以进行多行匹配;
g => global 全局匹配
/A/.test('lalala') =>false
/A/i.test('lalala') =>false

元字符详细解析

^ $

  • ^/$ 两个都不加:字符串中包含符合规则的内容即可;
    let reg1 = /\d+/;
  • ^/$ 两个都加:字符串只能是和规则一致的内容;
    let reg1 = /^\d+$/;
    // 例子:验证手机号码(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$/; //=>把特殊符合转换为普通的
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

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、验证是否为有效数字

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

2、验证密码

//=>数字、字母、下划线
//=>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;
        }
    }
}
*/

3、验证真实姓名的

 * 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}$/;

4、验证邮箱的

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...)

5、身份证号码

/*
 * 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 = "zshdufgeghjng";
reg = /^@"+type+"@$/;   // 以@ 开始/结束," 出现多次 typ  e出现多次
console.log(reg.test("@zshdufgeghjng@")); //=>false
console.log(reg.test('@"""typeeeee"@')); //=>true
//2.这种情况只能使用构造函数方式(因为它传递的规则是字符串,只有这样才能进行字符串拼接)
reg = new RegExp("^@"+type+"@$");   // type 为变量;
console.log(reg.test("@zshdufgeghjng@"));//=>true

正则的捕获

实现正则捕获的办法

  • 正则RegExp.prototype上的方法
    • exec
    • test
  • 字符串String.prototype上支持正则表达式处理的方法
    • replace
    • match
    • splite
    • ...
let str = "lyridel2019yangfan2020qihang2021";
let reg = /\d+/;
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" 存储的是上次捕获的结果

//=>RegExp.$1~RegExp.$9:获取当前本次正则匹配后,第一个到第九个分组的信息
2.replace 字符串中实现替换的方法(一般都是伴随正则一起使用的)
let str = "lyr@2019|lyr@2020";
//=>把"lyr"替换成"蓝蓝"
//1.不用正则,执行一次只能替换一个
/*
str = str.replace("lyr","蓝蓝").replace("lyr","蓝蓝");
console.log(str);
*/
//2.使用正则会简单一点
str = str.replace(/lyr/g,"蓝蓝");
console.log(str);

let str = "lyr@2019|lyr@2020";
//=>把"lyr"替换为"lanlan"
//str=str.replace("lyr","lanlan").replace("lyr","lanlan");
//"lyrpeixunpeixun@2019|lyr@2020" 每一次替换都是从字符串第一个位置开始找的(类似于正则捕获的懒惰性)

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

正则懒惰性

  • 基于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依然是从字符串最开始找,找到的永远是第一个匹配到的x  `

懒惰性的解决办法

解决办法:全局修饰符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-多位,但是正则匹配只按照最长的匹配

如果我们希望正则尽量少地匹配字符,那么就可以在表示数字的符号后面加上一个?(即:问号加在量词的后边,则表示非贪婪匹配)

reg = /c{1,}?/; 
str='ccccc'; 
alert(reg.exec(str)); 

封装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才可以)
//console.log("DD2019@2020很多3GD".match(reg)); //=> ["2019", "2020", "3"]

正则的分组捕获

//=>身份证号码
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"]
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容

  • 正则表达式到底是什么东西?字符是计算机软件处理文字时最基本的单位,可能是字母,数字,标点符号,空格,换行符,汉字等...
    狮子挽歌阅读 2,134评论 0 9
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,204评论 0 4
  • Python中的正则表达式(re) import rere.match #从开始位置开始匹配,如果开头没有则无re...
    BigJeffWang阅读 7,050评论 0 99
  • http://www.jb51.net/tools/zhengze.html 正则表达式30分钟入门教程 版本:v...
    nullleaf阅读 582评论 0 2
  • 注:本篇文章只为方便查看,特此保留,如有冒犯,敬请谅解!!! 本文目标 30分钟内让你明白正则表达式是什么,并对它...
    阿杰Alex阅读 1,475评论 0 10