美文网首页
JavaScript正则表达式

JavaScript正则表达式

作者: 指尖跳动 | 来源:发表于2021-01-14 10:03 被阅读0次

    1-1 正则表达式简介及工具使用

    什么是正则表达式

    Regular Expression 使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

    正则表达式工具

    在线:https://regexper.com

    本地:https://github.com/javallone/regexper-static

    2-1 RegExp对象

    字面量
    • var reg = /\bis\b/g;
     var reg = /\bis\b/g
    
     console.log('He is a boy.Where is he'.replace(reg,'Is')) // He Is a boy.Where Is he
    

    \b:单词边界。
    g:全文搜索匹配。

    构造函数
    • var reg= new RegExp('\bis\b','g')
    var reg= new RegExp('\\bis\\b','g')
    console.log('He is a boy.Where is he'.replace(reg,'Is')) // He Is a boy.Where Is he
    
    修饰符
    • g:global 全文搜索,不添加的话搜索到第一个匹配停止
    • i:ignore case 忽略大小写,默认大小写敏感
    • m:multiple lines 多行搜索
    'He is a boy.Is he?'.replace(/\bis\b/g,'A') // "He A a boy.Is he?"
    
    'He is a boy.Is he?'.replace(/\bis\b/gi,'A') // "He A a boy.A he?"
    

    2-2 元字符

    在正则表达式中有特殊含义的非字母字符




    https://www.runoob.com/regexp/regexp-metachar.html

    2-3 字符类

    • 我们可以使用元字符[]来构造一个简单的类

    • 所谓类就是符合某些特性的对象,一个泛指,而不是某个特定字符

    • 表达式[abc]把字符abc归为一类,表达式可以匹配这类字符

    'a1b2c3d4'.replace(/[abc]/g,'X') // "X1X2X3d4"
    
    字符类取反
    • 使用元字符^创建反向类/负向类

    • 反向类的意思是不属于某类内容

    • 表达式[^abc]表示不是字符a或b或c的内容

    'a1b2c3d4'.replace(/[^abc]/g,'X') // "aXbXcXXX"
    

    2-4 范围类

    • 正则表达式还提供了范围类

    • 我们可以使用[a-z]来连接两个字符表示从a到z的任意字符

    • 这是个闭区间,也就是包含a和z本身

    'a1b2c3d4z9'.replace(/[a-z]/g,'Q') // "Q1Q2Q3Q4Q9"
    
    • []中可以连写 [a-zA-Z]
    'a1b2c3d4z9ADDFGGDWW'.replace(/[a-zA-Z]/g,'Q') // "Q1Q2Q3Q4Q9QQQQQQQQQ"
    
    '2019-02-11'.replace(/[0-9]/g,"A") // "AAAA-AA-AA"
    
    '2019-02-11'.replace(/[0-9-]/g,"A") // "AAAAAAAAAA"
    

    2-5 预定义类及边界

    预定义类



    例:
    匹配一个ab+数字+任意字符的字符串

    ab\d.

    ab\d.
    边界

    'This is a boy'.replace(/\bis\b/g,'A') // "This A a boy"
    
    '@asdfg@vbbdd@'.replace(/^@./g,'Q') // "Qsdfg@vbbdd@"
    
    '@asdfg@vbbdd@'.replace(/.@$/g,'Q') // "@asdfg@vbbdQ"
    

    2-6 量词

    2-7 贪婪模式与非贪婪模式

    贪婪模式

    默认为贪婪模式

    '12345678'.replace(/\d{3,6}/g,'X') // "X78"
    
    非贪婪模式
    • 让正则表达式尽可能少的匹配,匹配成功就不再继续尝试
    • 做法很简单,就是在量词后面加上?即可
     '12345678'.replace(/\d{3,6}?/g,'X') // "XX78"
    

    2-8 分组

    使用()达到分组的功能,使量词作用于分组。

    byron{3}


    byron{3}

    (byron){3}


    (byron){3}

    替换小写字母+数字连续出现三次的场景:

    'a1b2c3d4kjhgg'.replace(/([a-z]\d){3}/,'X') // "Xd4kjhgg"
    
    反向引用
    '2019-02-11'.replace(/(\d{4})-(\d{2})-(\d{2})/,'$2/$3/$1') // "02/11/2019"
    
    忽略分组

    不需要捕获某分组,只需在分组内加上?:就可以

    (byron).(ok)


    (byron).(ok)

    (?:byron).(ok)


    (?:byron).(ok)

    2-9 前瞻

    'a2*3'.replace(/\w(?=\d)/,'X') // "X2*3"
    
    'a2*34v8'.replace(/\w(?=\d)/g,'X') // "X2*X4X8"
    

    2-10 与正则相关的正则对象属性

    • global:是否全局搜索,默认false
    • ignore case:是否大小写敏感,默认false
    • multiline:多行搜索,默认false
    • lastIndex:当前表达式匹配内容的最后一个字符的下一个位置
    • source:正则表达式的文本字符串

    注:这几个属性是只读的,不能对其设值

        var reg1 = /\w/
        var reg2 = /\w/igm
    
        console.log(reg1.global) // false
    
        console.log(reg1.ignoreCase) // false
    
        console.log(reg1.multiline) // false
    
        console.log(reg1.source) // \w
    
        console.log(reg2.global) // true
    
        console.log(reg2.ignoreCase) // true
    
        console.log(reg2.multiline) // true
    
        console.log(reg2.source) // \w
    

    2-11 test和exec方法

    RegExp.prototype.text(str)

    test()方法执行一个检索,用来查看正则表达式与指定的字符串是否匹配。返回 true 或 false。

        var reg = /\w/g
    
        while(reg.test('ab')){
            console.log(reg.index)
    
        }
    

    如果正则表达式设置了全局标志,test() 的执行会改变正则表达式 lastIndex属性。连续的执行test()方法,后续的执行将会从 lastIndex 处开始匹配字符串,(exec() 同样改变正则本身的 lastIndex属性值).

    RegExp.prototype.exec(str)

    如果匹配成功,exec() 方法返回一个数组(包含额外的属性 index 和 input ,参见下方表格),并更新正则表达式对象的 lastIndex 属性。完全匹配成功的文本将作为返回数组的第一项,从第二项起,后续每项都对应正则表达式内捕获括号里匹配成功的文本。

    如果匹配失败,exec() 方法返回 null,并将 lastIndex 重置为 0 。

    相关文章

      网友评论

          本文标题:JavaScript正则表达式

          本文链接:https://www.haomeiwen.com/subject/admzwhtx.html