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

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]*)?$/

参考资料:

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

推荐阅读更多精彩内容