JS 正则表达式总结

0、前言

  作为一名前端开发者,在做表单验证或者写一些gulp任务或webpack配置时都不可避免的会用到正则,虽然零零散散看过一些正则相关语法,但始终觉得没吃透,直到遇到这篇文章(强烈推荐)。本文仅记录个人觉得很有价值的几个点。

1、正则语法

正则是匹配模式,要么匹配字符,要么匹配位置。

对于一个字符串string='hello',你应该这样看待它:


也就是要看成字符和位置的集合,而不是单单的是字符。

  • 字符组
    范围表示法:[a-z]从a到z的所有小写字母;
    排除字符组:[^a-z]除a-z以外的所有字符;
    常见缩写:\d,\D,\w,\W,\s,\S,.,其中'.'匹配任意非换行符、回车符、行分隔符和段分隔符。
    此外,若要匹配任意字符,可用:[\d\D]、[\w\W]、[\s\S]和[^]中任何的一个。

  • 多选分支

    (p1|p2|p3),其中p1、p2和p3是子模式,用|(管道符)分隔,表示其中任何之一

    注意:分支结构是惰性的,当第一个子模式匹配成功后,后面的模式会被忽略

  • 位置匹配符(6个)

    ^ $ \b \B (?=p) (?!p)

    ^:开始的位置;
    $:结束的位置;
    \b:单词边界,具体就是\w和\W之间的位置,也包括\w和^之间的位置,也包括\w和$之间的位置;
    \B:\b的取反;
    (?=p):p之前的位置,正向先行断言;
    (?!p):上述取反,反向先行断言;
    把位置理解空字符,是对位置非常有效的理解方式。同一个位置可以有多个空字符,就像^和首字母之间还可以有其它空位置一样

  • 括号的作用
    1、分组和分支

    /(ab)+/         //分组
    /^I love (JavaScript|Regular Expression)$/       //分支
    

    2、分组引用
    主要是方便获取小括号匹配到的内容

    //1、match方法,有小括号时,返回的数组中包含小括号匹配的内容
    var regex = /(\d{4})-(\d{2})-(\d{2})/;
    var string = "2017-06-12";
    console.log( string.match(regex) ); 
    // => ["2017-06-12", "2017", "06", "12", index: 0, input: "2017-06-12"]
    
    //2、API引用法,使用replace时可直接用$1等获取小括号内容
    var regex = /(\d{4})-(\d{2})-(\d{2})/;
    var string = "2017-06-12";
    regex.test(string); // 正则操作即可,例如
    //regex.exec(string);
    //string.match(regex);
    console.log(RegExp.$1); // "2017"
    console.log(RegExp.$2); // "06"
    console.log(RegExp.$3); // "12"
    
    //3、反向引用 \1,\2
    var regex = /\d{4}(-|\/|\.)\d{2}\1\d{2}/;
    var string1 = "2017-06-12";
    var string2 = "2017/06/12";
    var string3 = "2017.06.12";
    var string4 = "2016-06/12";
    console.log( regex.test(string1) ); // true
    console.log( regex.test(string2) ); // true
    console.log( regex.test(string3) ); // true
    console.log( regex.test(string4) ); // false
    

    3、非捕获分组
    非捕获分组的意义在于不引用括号的内容,节省内存

    var regex = /(?:ab)+/g;
    var string = "ababa abbb ababab";
    console.log( string.match(regex) ); 
    //=>RegExp.$1值为'''',不用非捕获模式时为"ab"
    
  • 符号的优先级
    一个正则表达式涉及的操作符有:

    1.转义符 \
    2.括号和方括号 (...)、(?:...)、(?=...)、(?!...)、[...]
    3.量词限定符 {m}、{m,n}、{m,}、?、*、+
    4.位置和序列 ^ 、$、 \元字符、 一般字符

    1. 管道符(竖杠)|.

    上面操作符的优先级从上至下,由高到低。

2、写好正则的建议

  • 使用具体型字符组来代替通配符,来消除回溯
    少用通配符'.',减少回溯次数,提升匹配速度
  • 使用非捕获型分组(?:)
    当必须要用括号,又不想引用时,使用非捕获型分组可节省内存
  • 独立出确定字符
    例如/a+/,可以修改成/aa*/。后者能比前者多确定了字符a,可加快判断是否匹配失败,进而加快移位的速度
  • 提取分支公共部分
    比如/abc|def/,修改成/^(?:abc|def)/。这样做,可以减少匹配过程中可消除的重复。
  • 减少分支的数量,缩小它们的范围
    /red|read/,可以修改成/rea?d/。此时分支和量词产生的回溯的成本是不一样的。

3、正则相关JS函数

String类型四个+RegExp类型二个,常用的是3+1

  • match
    当全局匹配时,match返回所有匹配结果,数组形式;
    当局部匹配时,match返回一个结果和其它信息,如index,input,数组形式;
    当没有匹配到数据时,返回null

    var string = "2017.06.27";
    var regex1 = /\b(\d+)\b/;
    var regex2 = /\b(\d+)\b/g;
    console.log( string.match(regex1) );
    console.log( string.match(regex2) );
    // => ["2017", "2017", index: 0, input: "2017.06.27"]
    // => ["2017", "06", "27"]
    
  • split
    1、接受第二个参数,表示分割后数组的长度;
    2、和match一样,当第一个参数是字符串时会将其转为正则表达式,因此建议不要传字符串,而是直接传正则

  • replace
    1、第二个参数可以是字符串或者函数,当是函数时,第一个参数表示整个匹配的内容,然后依次是括号匹配的内容,再然后是index和input;
    2、str.replace返回的是新字符串,str本身并未被改变,即replace是不改变原始字符串的。

  • test

    /\d+/.test(123);//true
    

4、总结

本文是结合自身情况对老姚的这篇文章进行的总结。收获如下:

  • 操作符优先级:转义>括号>量词>普通字符>管道符
  • 正则表达式不光匹配字符,还匹配位置
  • 位置符:^ $ (?=b) (?!b) \b \B,其中\b是\w与\W之间的位置,(?=b)是b之前的位置
  • ^与首字母之间还可以有位置,尾字母和$同理。即同一个位置可以有多个空白字符。
  • 写好正则的建议 -第二节

5、案例

  • 把"12345678",变成"12,345,678"
var string1 = "12345678",
string2 = "123456789";
reg = /(?!^)(?=(\d{3})+$)/g;

var result = string1.replace(reg, ',')
console.log(result); 
// => "12,345,678"

result = string2.replace(reg, ',');
console.log(result); 
// => "123,456,789"

(?!^) 表示非开头的位置
(?=(\d{3})+$) 表示从结尾的位置开始往前连续三个数字之前的位置

推荐阅读更多精彩内容

  • 作为一名攻城狮,对正则表达式一定不会很陌生,但在平时开发中有时依然会遇到这样或那样的问题。本文从基础出发,本着让初...
    艾特TT阅读 1,751评论 1 11
  • 初衷:看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印...
    DCbryant阅读 3,552评论 0 20
  • 正则表达式到底是什么东西?字符是计算机软件处理文字时最基本的单位,可能是字母,数字,标点符号,空格,换行符,汉字等...
    狮子挽歌阅读 1,869评论 0 9
  • 允许的修饰符 有些修饰符能在所有允许的地方出现, 但并非所有的都这样. 通常, 影响 regex 编译的修饰符(...
    焉知非鱼阅读 931评论 0 1
  • 温馨提示:文章很长很长,保持耐心,必要时可以跳着看,当然用来查也是不错的。 正则啊,就像一座灯塔,当你在字符串的海...
    Stinson阅读 3,972评论 3 83
  • 收到远方寄来的信,信里夹着这样一张画儿,我问她为什么不试着画出我的眼睛,她说她很担心我会从画里飞出去..
    YoungMural阅读 119评论 0 0
  • 七 林像枫有个大学笔友叫魏瑶,是当年班上公认的才女,虽然貌不...
    疯子教授冯耀阅读 288评论 11 1
  • 恩茵阅读 87评论 0 0
  • 是在简书日报里无意中看到这部影片的,一位简友安利了它,影评写的特别好,足以吸引我四处找了播放器,终于看了这部片子。...
    骑着Dumbo的Mitian阅读 777评论 0 1
  • 作者:彭星华 时间:2016-08-29 每天,手术室的手术很多,经常会出现争抢手术间的情况,在不违反原则的情况...
    彭星华彭医生阅读 140评论 0 0