• 技术文章 >web前端 >js教程

    JS正则表达式要点分析

    小云云小云云2018-01-30 17:20:18原创855
    本文主要和大家分享JS正则表达式的要点,由于之前在看VueJS的源码, 看到了HtmlParser部分, 感觉以前看的正则表达式基础知识已经完全不够用了, 现翻阅博客资料, 将一些JS中正则表达式难用的部分总结归纳, 方便自己和sf友翻阅.

    正则分组

    重复匹配

    对于重复的匹配, 我们经常使用到正则表达式的分组功能, 我们使用正则匹配IP地址来实践一下.

    假设我们要匹配的IP地址在区间 0.0.0.0 - 255.255.255.255 之间, 可以直观的了解到, 我们只需要匹配 三位数字+点号 三遍, 再匹配三位数字一遍就可以了.

    这里说的 三位数字+点号 既是我们说的一种规则, 我们可以在表达式中将它们转化为规则即: \d{1,3}\., 当我们把规则用括号包装后, 就变成了组: (\d{1,3}\.), 所以匹配IP地址的正则表达式可以写作: (\d{1,3}\.){3}\d{1,3}

    换种思路, 我们也可以这样匹配: \d{1,3}(\.\d{1,3}){3}

    拓展: 聪明的你可能已经想到, \d{1,3} 匹配是有疏漏的. 在实际生产过程中, \d{1,3} 可能匹配 999 这种数字, 他是一个错误的IP地址段. 这里贴上真实的IP地址正则匹配供大家参考: ((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))) , 另人愉快的是, 它使用的分组策略仍然是不变的.

    后向引用(反向引用)

    我们考虑一个很特殊的情况, 当我们要匹配四个IP段相同的情况, 如 100.100.100.100 时, 重复匹配分组的策略失效了: 重复匹配分组 并不能保证匹配相同的数字 -> 这时候我们需要借助 后向引用 策略的力量了(少年, 你渴望力量吗2333, 戳我头像, 带你探索音乐与代码交织的文艺道路.)

    后向引用在不同语言的正则表达式书写中, 有不同的语法, 我们讨论JS中最常见的一种, 形如: \number 的后向引用, 其中, number 代表分组的序号.

    给你一个简单的栗子, 瞬间就记住了, 假使我们要匹配重复的三位数字, 我们将匹配一个数字的规则标记为一个分组: (\d), 重复匹配这个分组(第一个分组)的具体内容三次: (\d)\1, 这样就达到了目的.

    我们很容易将重复匹配和后向引用分别开来: 前者是重复匹配相同的规则, 后者是匹配分组的具体内容.

    默认的一些规则需要稍加理解并记住:

    正则断言

    还记得我看过的一篇大概名为<30分钟学会正则表达式>的文章中, 里面提及过正则断言.
    当时感觉真是一看就懂. 但很遗憾, 实际生产中, 使用各种复杂正则表达式的情况实在是太少, 今天如果不翻阅百度, 我恐怕是不能记起断言的分类和各种使用方法了.

    断言的字面意思便是, 断定(程序)运行到此时(结果)是这样的"场景", 它描述的是一种 场景, 换句话说, 是一种"肯定的场景". 但要记住的是, 我们的"结果"是不包含在"场景"里面的.

    VueJS里头需要匹配HTML tag, 我们就以匹配: '<segment>Not Fault</segment>' 中的 'Not Fault' 为例吧.

    我们如果使用普通的正则表达式, 如 /<segment>.*</segment>/ 会匹配到整个字符串 '<segment>Not Fault</segment>'. 我们使用断言, 以"场景"的方式思考: '<segment>' 和 '</segment>' 是一种"肯定的场景", 我们需要匹配的结果是: 'Not Fault', 无论tag内部的字符无论如何变化, tag头和tag尾都是不变的.

    一鼓作气, 我们继续往下

    先行断言

    先行断言, 我是这样理解的: 先匹配内容, 再做"场景"假设.

    放到我们先前的栗子中, 便这样匹配, 一直匹配内容, 直到碰上 '</segment>' 的场景, 语法如下: (?=</segment>)

    后发断言

    后发断言, 我的理解是: 先匹配场景, 再匹配内容.

    放到我们先前的栗子中, 先匹配 '<segment>' 的场景, 再继续往下匹配内容, 语法如下: (?<=<segment>)

    实践

    正则表达式是对字符串内容做匹配, 所以我将"先"和"后"的理解绑定到内容匹配的先后顺序上, 方便理解.

    我们将先行断言和后发断言结合起来, 整个表达式如下: (?<=<segment>).*(?=</segment>), 我们便可获得想要的结果: 'Not Fault' 了.

    "正负"断言

    其实我们刚才做的是肯定的场景, 实际情况中还有"不满足此场景"的使用场景.

    比如, 我们刚才使用的表达式: (?<=<segment>).*(?=</segment>) 是肯定有 '<segment>' '</segment>' 的场景下去匹配内容, 其实是使用的 "正后发断言" 和 "正先行断言", "正"即代表肯定的状态.

    那负断言, 也就是不满足场景的断言咯... 语法即把正断言中的等于号换成感叹号:

    如: ['1999','2099','2199'...'9099'] 中如果我们要匹配除了'1999'以外的所有带有'99'结尾的年份, 我们可以使用表达式: (?<!19)99

    相关推荐:

    JavaScript正则表达式常用基本语法

    猪哥深谈php正则表达式及正则表达式都用在什么地方?

    JS基于正则表达式实现的密码强度验证功能示例_javascript技巧

    以上就是JS正则表达式要点分析的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:javascript 表达式 分析
    上一篇:封装一个自己的模块实例详解 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• Node实战:运用Cookie&Session进行登录验证• jQuery插件分享:Turn.js实现一个移动端电子书翻页效果• Angular学习之聊聊notification(自定义服务)• Node学习之聊聊Cookie-Session登录验证的工作原理• 一文搞懂JavaScript中的this指向问题
    1/1

    PHP中文网