目录
正则分组
重复匹配
后向引用(反向引用)
正则断言
先行断言
后发断言
实践
"正负"断言
首页 web前端 js教程 JS正则表达式要点分析

JS正则表达式要点分析

Jan 30, 2018 pm 05:20 PM
javascript 分析 表达式

本文主要和大家分享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, 这样就达到了目的.

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

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

  • \0代表的是, 整个正则表达式的匹配的内容

正则断言

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

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

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

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

一鼓作气, 我们继续往下

先行断言

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

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

后发断言

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

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

实践

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

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

"正负"断言

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

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

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

  • 负先行断言 (?!)

  • 负后发断言 (?<!)

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

相关推荐:

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

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

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


以上是JS正则表达式要点分析的详细内容。更多信息请关注PHP中文网其他相关文章!

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

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

WebSocket与JavaScript:实现实时监控系统的关键技术 WebSocket与JavaScript:实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

WebSocket与JavaScript:实现实时监控系统的关键技术引言:随着互联网技术的快速发展,实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用,并给出代码示例,详细解释其实现原理。一、WebSocket技

JavaScript和WebSocket:打造高效的实时天气预报系统 JavaScript和WebSocket:打造高效的实时天气预报系统 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket:打造高效的实时天气预报系统引言:如今,天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展,我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中,我们将学习如何使用JavaScript和WebSocket技术,来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We

简易JavaScript教程:获取HTTP状态码的方法 简易JavaScript教程:获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest

织梦CMS二级目录打不开的原因分析 织梦CMS二级目录打不开的原因分析 Mar 13, 2024 pm 06:24 PM

标题:解析织梦CMS二级目录打不开的原因及解决方案织梦CMS(DedeCMS)是一款功能强大的开源内容管理系统,被广泛应用于各类网站建设中。然而,有时候在搭建网站过程中可能会遇到二级目录无法打开的情况,这给网站的正常运行带来了困扰。在本文中,我们将分析二级目录打不开的可能原因,并提供具体的代码示例来解决这一问题。一、可能的原因分析:伪静态规则配置问题:在使用

如何在JavaScript中获取HTTP状态码的简单方法 如何在JavaScript中获取HTTP状态码的简单方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP状态码获取方法简介:在进行前端开发中,我们常常需要处理与后端接口的交互,而HTTP状态码就是其中非常重要的一部分。了解和获取HTTP状态码有助于我们更好地处理接口返回的数据。本文将介绍使用JavaScript获取HTTP状态码的方法,并提供具体代码示例。一、什么是HTTP状态码HTTP状态码是指当浏览器向服务器发起请求时,服务

分析腾讯主要的编程语言是否为Go 分析腾讯主要的编程语言是否为Go Mar 27, 2024 pm 04:21 PM

标题:腾讯主要的编程语言是否为Go:一项深入分析腾讯作为中国领先的科技公司,在编程语言的选择上一直备受关注。近年来,有人认为腾讯主要采用Go作为主要的编程语言。本文将对腾讯主要的编程语言是否为Go进行深入分析,并给出具体的代码示例来支持这一观点。一、Go语言在腾讯的应用Go是一种由Google开发的开源编程语言,它的高效性、并发性和简洁性受到众多开发者的喜

分析静态定位技术的优缺点 分析静态定位技术的优缺点 Jan 18, 2024 am 11:16 AM

静态定位技术的优势与局限性分析随着现代科技的发展,定位技术已经成为我们生活中不可或缺的一部分。而静态定位技术作为其中的一种,具有其特有的优势和局限性。本文将对静态定位技术进行深入分析,以便更好地了解其应用现状和未来的发展趋势。首先,我们来看一下静态定位技术的优势所在。静态定位技术是通过对待定位对象进行观测、测量和计算来实现位置信息的确定。相较于其他定位技术,

JavaScript和WebSocket:打造高效的实时搜索引擎 JavaScript和WebSocket:打造高效的实时搜索引擎 Dec 17, 2023 pm 10:13 PM

JavaScript和WebSocket:打造高效的实时搜索引擎引言:随着互联网的发展,用户对实时搜索引擎的要求也越来越高。传统的搜索引擎在进行搜索时,用户需要点击搜索按钮后才能得到结果,这种方式无法满足用户对于实时搜索结果的需求。因此,采用JavaScript和WebSocket技术来实现实时搜索引擎成为了一个热门的话题。本文将详细介绍使用JavaScri

See all articles