美文网首页
JavaScript基础(二)正则表达式初级

JavaScript基础(二)正则表达式初级

作者: 前端开发爱好者 | 来源:发表于2019-02-28 20:20 被阅读0次

    JavaScript正则表达式基本使用

    • 定义正则表达式:var reg=/java/; var reg2=new RegExp('java')

    第一部分、javaScript中正则有关的几个函数

    1. String.prototype.search

      • 找出字符串中某个字符串首次出现的位置
      'i love javaScript'.search(/love/); //2
      
      'i love javaScript'.search(/like/);//-1
      
    2. String.prototype.replace(regexp|substr,newSubStr|function)

      • 形参:regexp为正则对象或者正则字面量,全局的时候需要g,sub为要被替换的字符串,newSubStr为用于替换的新字符串,其中可以插入一些特殊变量名,function改函数的返回值将替换掉第一个参数的匹配结果。
      • 替换正则匹配的子字符串,返回替换后的新字符串,原先的不变
      'i love javaScript'.replace(/love/,'like') //i like javaScript
      

      使用字符串作为参数,替换字符串可以插入如下变量名

      字符 替换文本
      1,2 与正则中的第1到99个子表达式想匹配的文本
      $& 与正则相匹配的字串
      $` 匹配子串左侧文本
      $' 匹配字串右侧文本
      $$ 美元符号$
      • replace的第二个参数可以为函数,函数的参数是匹配到的串儿
    3. String.prototype.split(separator,limit)

      • 形参:separator为字符串或者正则,limit需要的数组的长度
      • 返回值:分割字符串,以数组的形式反回
      • 注意:
        • 如果分隔符是包含捕获括号的正则表达式,则每次分隔符匹配时,捕获括号的结果会被拼接到数组中,并不是浏览器都支持
      'love'.split('',3)
      //['l','o','v']
      
      'i love javascript i like node js'.split(/l[oi][vk]e/)
      // ["i ", " javascript i ", " node js"]
      
      'i love javascript i like node js'.split(/(l[oi][vk]e)/)
      // ["i ", "love", " javascript i ", "like", " node js"]
      
      ''.split(';')
      // ['']
      
      ''.split('')
      // []
      
      'love'.split('')
      // ['l','o','v','e']
      
    4. String.prototype.match

      • 捕获字符串的子字符串到一个数组中,默认只匹配一个
      'i love java javaScript'.match(/java/)
      // ["java", index: 7, input: "i love java javaScript"]
      
      'i love java javaScript'.match(/java/g)
      //["java", "java"]
      
      
    5. RegExp.prototype.test

      • 用来测试字符串中是否含有子字符串
      /javaScript/.test('i love javaScript') //true
      
    6. RegExp.prototype.exec

      • exec方法一次只能匹配一个子字符串,即使含有g
      var reg = /script/g;
      var str = 'i love javascript and typescript Javascript'
      
      reg.exec(str)
      // ["script", index: 11, input: "i love javascript and typescript Javascript"]
      reg.lastIndex //17
      
      reg.exec(str)
      //["script", index: 26, input: "i love javascript and typescript Javascript"]
      reg.lastIndex //32
      
      reg.exec(str)
      // ["script", index: 37, input: "i love javascript and typescript Javascript"]
      reg.lastIndex //43
      
      reg.exec(str)
      // null
      reg.lastIndex // 0
      
      reg.exec(str)
      // ["script", index: 11, input: "i love javascript and typescript Javascript"]
      
      reg.lastIndex //17
      

    第二部分、正则表达式基础

    • 更多详细教程请参考:菜鸟教程链接

    • 元字符

      字符 匹配规则
      \d 匹配数字,大写取反
      . 除换行符以外的任意字符
      \w 匹配字母数字下划线,大写取反
      \s 匹配空白符号,大写取反
      \b 匹配单词边界
      ^$ 开始结束
      \num 对所获取的匹配的引用 '(.)\1' 匹配两个连续的相同字符
    • 数量有关

      字符 规则
      {n} 匹配n次
      {n,} 至少比n次
      {n,m} 匹配n-m次
      * 等价于{0,}
      + 等价于{1,}
      ? 等价于{0,1}
      • 贪婪与懒惰:正则表达式匹配尽量多的字符,例如/test\d*//.match('test123')返回test123。在标识符后添加?可以使其匹配尽量少的字符。
    • 字符范围

      字符 匹配规则
      [a-z] 匹配a-z任意字符
      [\u4E00-\u9FA5] 找出Unicode编码范围是\u4e00到\u9FA5的字符,判断是否有汉子
    • 分组

      • ():匹配并获取匹配
      • replacer函数中,JavaScript可以用1...9获取对应内容
        'i love javaScript'.replace(/(love)/,'$1 $1')
        //'i love love javaScript'
        
      • match函数:表达式有全局属性时,捕获所有符合的表达式,没有全局属性时,匹配第一个结果,将匹配到的字符串放入结果数组
        'i love java javaScript'.match(/(java)/)
        
        //["java", "java", index: 7, input: "i love java javaScript"]
        
        'i love java javaScript'.match(/(java\w*\b)/g)
        //  ["java", "javaScript"]
        
        'i love java javaScript'.match(/(java\w*) (java\w*)/)
        //  ["java javaScript", "java", "javaScript", index: 7, input: "i love java javaScript"]
        
      • exec函数:忽略全局属性,只返回一个结果和分组结果
        /(java) (javaScript)/g.exec('i love java javaScript java javaScript')
        
        // ["java javaScript", "java", "javaScript", index: 7, input: "i love java javaScript java javaScript"]
        
    • 分支条件:'|'分支条件影响两边所有内容

      'javaScript typeScript'.match(/(java|type)Script/g)
      // ["javaScript", "typeScript"]
          
      'javaScript typeScript'.match(/java|typeScript/g)
      // ["java", "typeScript"]
      
    • 断言

      • (?=exp):用来捕获正则表达式的后面,捕获括号内前面的内容,不分配组号
        'i love javaScript'.match(/l\w+\s+(?=java\w*)/)
        
        // ["love ", index: 2, input: "i love javaScript"]
        
      • (?!exp):用在正则表达式后面,捕获后面不是括号内的字符
      • (?:exp):会匹配分组中的内容,但是不再分配组号,在replace,match等函数中作用也会消失。例如, 'industr(?:y|ies) 就是一个比 'industry|industries' 更简略的表达式
        'i love javaScript'.match(/(java\w*)/)
        
        //  ["javaScript", "javaScript", index: 7, input: "i love javaScript"]
        
        'i love javaScript'.match(/(?:java\w*)/)
        
        //["javaScript", index: 7, input: "i love javaScript"]
        
    • 三个处理选项:

      内容 标记 文字描述
      i ignoreCase 忽略大小写
      g globle 全局匹配
      m mutiple 多行匹配

    第三部分、正则表达式高级

    • 工作原理
      ,正则表达式在JavaScript中执行主要分为以下四个部分,编译=>设置开始位置=>正则匹配=>匹配结果这四部分

    第四部分、ES6的正则扩展

    • 构造函数:RegExp构造函数第一个参数是正则对象,第二个参数指定修饰符时会忽略原有正则的修饰符。
    • 字符串对象的四个方法match、replace、search、split内部全部调用RegExp的实例方法,例如search调用RegExp.prototype[Symbol.search]
    • u修饰符:用来正确处理大于\uFFF的Unicode字符,可以正确处理4个字节的UTF-16编码
    • y修饰符(粘连sticky):与g相似,g只要求剩余位置中存在匹配就可以,y需要确保匹配从剩余的第一个位置开始。设计本质是让头部匹配标志^在全局匹配中都有效
    • sticky属性,表示是否设置了y修饰符
    • flag属性:返回正则的修饰符
    • s修饰符:.可以匹配任意单个非终止符(终止符:换行符\n 回车符\r,行分隔符,段分隔符),引入/s修饰符,使得可以匹配任意单个字符,与之对应的dotAll表示是否处在doAll模式下。
    • V8 4.9已经支持后行断言
    • 具名组匹配,为每个分组起一个名字
    • 此部分参考ES6标准入门

    第五部分、常用正则表达式

    第六部分、实例

    // 将字符串中所有的<img/>标签替换为<span/>标签
    textHTML.replace(/(<img.+?text="\S+".+?>)/gi,
          match => match.replace(/<img.+text="(\S+?)".+>/, '<span>$1</span>')
    // 校验URL
    /^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\S+(?::\S*)?@)?(?:(?:(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[0-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]+-?)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]+-?)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))|localhost)(?::\d{2,5})?(?:(/|\?|#)[^\s]*)?$/
    

    参考资料:

    相关文章

      网友评论

          本文标题:JavaScript基础(二)正则表达式初级

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