温故知新之javascript正则

jasminecjc

因为没有系统的总结过正则表达式,工作中用到的也不到,主要靠百度现成的加改改不知道怎么就成功了,决心好好的学习一下正则表达式

新建正则表达式

  1. 使用字面量,以斜杠表示开始和结束

    var regex = /\s+/g;
  2. 使用RegExp构造函数

    var regex = new RegExp('\s+','g');
  3. 差别
    上面两种写法是等价的,都新建了一个正则表达式对象。它们的主要区别是,第一种方法在编译时新建正则表达式,第二种方法在运行时新建正则表达式。考虑到书写的便利和直观,实际应用中,基本上都采用字面量的写法。

属性

  1. 一类是修饰符相关,返回一个布尔值,表示对应的修饰符是否设置

    ignoreCase:返回一个布尔值,指忽略大小写,注意仅是忽略大小写,并不忽略全半角,该属性只读。
    global:返回一个布尔值,进行全局匹配,指匹配到目标串的结尾,该属性只读。
    multiline:返回一个布尔值,允许多行匹配,该属性只读。
    
    m修饰符表示多行模式(multiline),会修改^和$的行为。默认情况下(即不加m修饰符时),^和$匹配字符串的开始处和结尾处,加上m修饰符以后,^和$还会匹配行首和行尾,即^和$会识别换行符(\n)。
    /world$/.test('hello world\n') // false
    /world$/m.test('hello world\n') // true
    上面的代码中,字符串结尾处有一个换行符。如果不加m修饰符,匹配不成功,因为字符串的结尾不是“world”;加上以后,$可以匹配行尾。
    /^b/m.test('a\nb') // true
    上面代码要求匹配行首的b,如果不加m修饰符,就相当于b只能处在字符串的开始处。
  2. 另一类是与修饰符无关的属性,主要是下面两个

    lastIndex:返回下一次开始搜索的位置。该属性可读写
    source:返回正则表达式的字符串形式(不包括反斜杠),该属性只读
    
    正则对象的lastIndex属性不仅可读,还可写。一旦手动设置了lastIndex的值,
    就会从指定位置开始匹配。但是,这只在设置了g修饰符的情况下,才会有效。
    

方法

  1. test()
    正则对象的test方法返回一个布尔值,表示当前模式是否能匹配参数字符串

    reg.test(str)

    如果正则表达式带有g修饰符,则每一次test方法都从上一次结束的位置开始向后匹配。

    var r = /\s+/g;
    var s = 'a b c';
    
    r.lastIndex // 0
    r.test(s) // true
    
    r.lastIndex // 2
    r.test(s) // true
    
    r.lastIndex // 4
    r.test(s) // false
  2. exec()
    正则对象的exec方法,可以返回匹配结果。如果发现匹配,就返回一个数组,成员是每一个匹配成功的子字符串,否则返回null。
    如果正则表示式包含组匹配,则返回的数组会包括多个成员。第一个成员是整个匹配成功的结果,后面的成员就是圆括号对应的匹配成功的组。也就是说,第二个成员对应第一个括号,第三个成员对应第二个括号,以此类推。整个数组的length属性等于组匹配的数量再加1
    exec方法的返回数组还包含以下两个属性:

    • input:整个原字符串。

    • index:整个模式匹配成功的开始位置(从0开始计数)。

    如果正则表达式加上g修饰符,则可以使用多次exec方法,下一次搜索的位置从上一次匹配成功结束的位置开始。

    var r = /a(b+)a/g;
    
    var a1 = r.exec('_abbba_aba_');
    a1 // ['abbba', 'bbb']
    a1.index // 1
    r.lastIndex // 6
    
    var a2 = r.exec('_abbba_aba_');
    a2 // ['aba', 'b']
    a2.index // 7
    r.lastIndex // 10
    
    var a3 = r.exec('_abbba_aba_');
    a3 // null
    a3.index // TypeError: Cannot read property 'index' of null
    r.lastIndex // 0
    
    var a4 = r.exec('_abbba_aba_');
    a4 // ['abbba', 'bbb']
    a4.index // 1
    r.lastIndex // 6

    当整个字符串到达尾部,正则对象的lastIndex属性重置为0,意味着以后的匹配将从头开始

字符串对象的方法

  1. match

    字符串对象的match方法对字符串进行正则匹配,返回匹配结果。
    如果正则表达式带有g修饰符,则该方法与正则对象的exec方法行为不同,会一次性返回所有匹配
    成功的结果。
    设置正则表达式的lastIndex属性,对match方法无效,匹配总是从字符串的第一个字符开始。
  2. search

    字符串对象的search方法,返回第一个满足条件的匹配结果在整个字符串中的位置。如果没有
    任何匹配,则返回-1。
    该方法会忽略g修饰符。设置lastIndex也无效,总是从第一个位置开始
  3. replace
    str.replace(search, replacement)

       搜索模式如果不加g修饰符,就替换第一个匹配成功的值,否则替换所有匹配成功的值。
    'aaa'.replace('a', 'b') // "baa"
    'aaa'.replace(/a/, 'b') // "baa"
    'aaa'.replace(/a/g, 'b') // "bbb"
  4. split

    字符串对象的split方法按照正则规则分割字符串,返回一个由分割后的各个部分组成的数组。
    `str.split(separator, [limit])`
    该方法接受两个参数,第一个参数是分隔规则,第二个参数是返回数组的最大成员数。

贪婪匹配

需要特别指出的是,正则匹配默认是贪婪匹配,也就是匹配尽可能多的字符
var re = /^(\d+)(0*)$/;
re.exec('102300'); // ['102300', '102300', '']
由于\d+采用贪婪匹配,直接把后面的0全部匹配了,结果0*只能匹配空字符串了。
必须让\d+采用非贪婪匹配(也就是尽可能少匹配),才能把后面的0匹配出来,如果想将贪婪模式改为非贪婪模式,可以在量词符后面加一个问号
var re = /^(\d+?)(0*)$/;
re.exec('102300'); // ['102300', '1023', '00']

匹配规则

图片描述

图片描述

图片描述

图片描述

扩展

  1. 切分字符串

    'a,b, c  d'.split(/[\s\,]+/); // ['a', 'b', 'c', 'd']
  2. 利用g修饰符允许多次匹配的特点,可以用一个循环完成全部匹配

    var r = /a(b+)a/g;
    var s = '_abbba_aba_';
    
    while(true) {
      var match = r.exec(s);
      if (!match) break;
      console.log(match);
    }link
    //["abbba", "bbb"]
    //["aba", "b"]
  3. replace的应用
    replace方法的一个应用,就是消除字符串首尾两端的空格。

    var a = '  aa  bb  ';
    
    a.replace(/^\s+|\s+$/g, '')
    //"aa  bb"

    replace方法的第二个参数可以使用美元符号$,用来指代所替换的内容

    'hello world'.replace(/(\w+)\s(\w+)/, '$2 $1')
    // "world hello"

    replace方法的第二个参数还可以是一个函数,将每一个匹配内容替换为函数返回值

参考资料

廖雪峰老师的教程
阮一峰老师的教程

阅读 1.2k

jascheng的前端学习
前端学习路上的笔记和总结
952 声望
37 粉丝
0 条评论
952 声望
37 粉丝
宣传栏