草系前端手摸手带你实现正则引擎,点燃夏日最热情的烟火(二)🔥

简介: 草系前端手摸手带你实现正则引擎,点燃夏日最热情的烟火(二)🔥

正则原理浅析


本章节部分内容参考:正则表达式引擎执行原理——从未如此清晰!,这篇文章也有很多可以了解的内容大家也可以去围观一下,我从这篇文章学到很多,总结整理的很好。


前文我们已经讲解过了 DFA 和 NFA,即确定有限自动机和非确定有限自动机,根据前面的铺垫想必各位大佬已经可以将正则引擎与自动机关联起来了,而正则引擎大体也可以分成这样的两大类,即:DFA 正则引擎和 NFA 正则引擎。


DFA引擎

举个例子


我们直接举一个比较简单的例子:

正则表达式是 a[db]c

待匹配的字符串是 abc


此处我们使用‘[]’的原因是第三章手摸手,带你实现简易版正则引擎我们将会去实现‘[]’


下面我们开始匹配:


网络异常,图片无法展示
|


不知道大家有没有理解,我描述一下对比的过程:


  1. 第一次是字符 a 和正则表达式 a 比较
  2. 匹配成功后,是字符 b 同时比较表达式中的  b 和 d
  3. 再次匹配成功,字符 c 和正则表达式 c 比较
  4. 匹配成功


这里面我们值得注意的点是,第二次匹配是 b 同时和 b, d 进行比较,所以可能会消耗更多的内存。


特点


我们从上面的例子可以看出一些DFA正则引擎的特点:


  • 文本主导:按照文本顺序执行,所以保证了DFA正则引擎的确定性
  • 记录当前所有有效可能:正如前文示例中的第二次匹配一样,同时比较了 b 和 d ,所以需要消耗更大的内存
  • 每个字符只检查一次:提高了执行效率,因为没有回溯操作重复匹配的过程
  • 不能使用反向引用等功能:因为每个字符只检查一次,只记录当前比较值,所以不能使用反向引用、环视等一些功能


NFA引擎

举个例子


例子还是刚才的例子,方便大家对照:

正则表达式是 a[db]c

待匹配的字符串是 abc

下面我们开始匹配:


网络异常,图片无法展示
|


这里和前面的DFA模式做一下对比,我们会发现区别,NFA引擎在匹配之前会记录字符的位置,然后选择其中一个可能状态进行匹配,如果匹配失败,会进行回溯,进入其他分支进行匹配。


特点


我们从上面的例子可以看出一些NFA正则引擎的特点:


  • 文表达式主导:按照表达式的一部分执行,如果不匹配换其他部分继续匹配,直到表达式匹配完成。
  • 会记录某个位置:我们看到当执行到[db]时,NFA引擎会记录字符的位置,然后选择其中一个先匹配。
  • 单个字符可能检查多次:我们看到当执行到[db]时,比较d后发现不匹配,于是NFA引擎换表达式的另一个分支b,同时文本位置回溯,重新匹配字符'b'。这也是NFA引擎是非确定型的原因,同时带来另一个问题效率可能没有DFA引擎高。
  • 可实现反向引用等功能:因为具有回溯这一步,所以可以很容易的实现反向引用等一些功能!


对比


网络异常,图片无法展示
|


章节小结


本章结束大家已经获得了所有前置知识🌟,下面我们会利用这些知识去亲手实现一个简单的正则,也是本文的重点,下面我们一起进入下一章的内容吧📖

相关文章
|
前端开发 JavaScript 开发者
水墨代码:前端川的诞生——在夏日阴雨中启航
【前端川】网站于农历五月初一(2024年6月6日)上线,融合水墨画与现代前端技术,呈现独特的水墨代码美学。创建者陈川分享技术心得与实战经验,网站特色包括水墨风格界面、技术深度解析及实战案例。在夏日雨中启航,"前端川"致力于为开发者提供灵感与帮助,探索前端技术的无限可能。
266 17
|
5月前
|
JSON 前端开发 JavaScript
惊艳!阿里开源 15.2k Star 企业级低代码引擎揭秘,如何变革前端开发方式?
阿里巴巴开源的 LowCodeEngine 是一款企业级低代码引擎,具备可视化编排、UI 渲染、代码生成等全链路能力。支持 React、Vue、Rax 等框架,提供高扩展性与类型安全,助力高效开发,降低维护成本,适用于后台系统、多端同步等场景。
971 1
|
机器学习/深度学习 分布式计算 前端开发
构建前端防腐策略问题之前端代码会随着技术引擎的迭代而腐烂的问题如何解决
构建前端防腐策略问题之前端代码会随着技术引擎的迭代而腐烂的问题如何解决
136 0
|
JavaScript 前端开发 开发者
Vue.js深度解析:前端开发的生产力引擎
Vue.js深度解析:前端开发的生产力引擎
241 0
|
前端开发
前端学习笔记202305学习笔记第二十四天-vue3.0-新建用户表单3正则
前端学习笔记202305学习笔记第二十四天-vue3.0-新建用户表单3正则
116 0
前端学习笔记202305学习笔记第二十四天-vue3.0-新建用户表单3正则
|
前端开发
前端切图:用正则替换手机号码
前端切图:用正则替换手机号码
121 0
|
前端开发
前端学习笔记202305学习笔记第二十四天-vue3.0-新建用户表单4正则
前端学习笔记202305学习笔记第二十四天-vue3.0-新建用户表单4正则
141 0
|
前端开发
前端学习笔记202305学习笔记第二十四天-vue3.0-新建用户表单2正则
前端学习笔记202305学习笔记第二十四天-vue3.0-新建用户表单2正则
139 0
|
前端开发
前端学习案例4-正则概述-字符组的简写
前端学习案例4-正则概述-字符组的简写
181 0
前端学习案例4-正则概述-字符组的简写
|
前端开发
前端学习案例7-正则-括号的用法
前端学习案例7-正则-括号的用法
133 0
前端学习案例7-正则-括号的用法

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    586
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    238
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    226
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    164
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    275
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    408
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    177
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    112
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    192
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    262