从 Vue parseHTML 来学习正则表达式

最新推荐文章于 2024-02-13 23:11:35 发布
最新推荐文章于 2024-02-13 23:11:35 发布
阅读量248 收藏 1
点赞数 2
原文链接：https://www.cnblogs.com/lilei94/p/14968735.html
版权

写作本文的起源在于，在分析 Vue 源码中 parseHTML 方法时，发现网上对其中正则的解析文章较少，找到的几篇文章也有些语焉不详。于是静下心逐个表达式分析了其中的正则，以备查看。

常见正则规则可参见附录 1，Vue parseHTML 正则所用规则均可在其中找到定义。

Vue parseHTML 中所用的所有正则如下：

const attribute = /\s*([\s"’<>/=]+)(?:\s*(=)\s*(?:"(["]*)"+|’([’])’+|([^\s"’=<>]+)))?/ const dynamicArgAttribute = /^\s*((?:v-[\w-]+:|@|:|#)\[[^=]+\][^\s"'<>\/=]*)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>]+)))?/
const ncname = [a-zA-Z_][\\-\\.0-9_a-zA-Z${unicodeRegExp.source}]*
const qnameCapture = ((?:${ncname}\\:)?${ncname})
const startTagOpen = new RegExp(^<${qnameCapture})
const startTagClose = /^\s(/?)>/
const endTag = new RegExp(^<\\/${qnameCapture}[^>]*>)
const doctype = /^]+>/i
const comment = /^<!–/
const conditionalComment = /^<![/
接下来一个个通过拆解表达式，来分析上述正则规则。

attribute
const attribute = /\s*([\s"’<>/=]+)(?:\s*(=)\s*(?:"(["]*)"+|’([’]*)’+|([^\s"’=<>`]+)))?/
分析其结构：

^\s* 匹配 0 至多个以空白字符开头的字符串空白字符的部分

捕获组：([^\s"’<>/=]+) 匹配并捕获 1 至多次除 空白字符 " ’ < > / = 以外的所有字符

非捕获组：(?:\s(=)\s(?:"(["])"+|’([’])’+|([^\s"’=<>`]+)))?

\s* 匹配 0 至多个空白字符
捕获组：(=) 匹配并捕获 =
\s* 匹配 0 至多个空白字符
非捕获组：(?:"(["]*)"+|’([’]*)’+|([^\s"’=<>]+))"([^"]*)"+ " 匹配 " ([^"]*) 匹配并捕获 0 至多个除 " 外的字符 "+ 匹配 1 至多次 " '([^']*)'+ ' 匹配 ' ([^']*) 匹配并捕获 0至多个除 ' 外的字符 '+ 匹配 1 至多次 ' ([^\s"'=<>]+) 匹配并捕获 1 至多次除 空白字符 " ’ = < > ` 外的字符
? 匹配 3 中非捕获组 0 次或 1 次
小结
attribute 表达式匹配的是：

以 0 至多个空白字符开头；

紧接着 1 至多个除 空白字符 " ’ < > / = 以外的字符；

紧接着 0 至多个空白字符；

紧接着 =；

紧接着 0 至多个空白字符；

紧接着匹配 0 次或 1 次：

(1) " + 0 至多个除 " 外的字符 + "；

(2) 或 ’ + 0 至多个除 ’ 外的字符 + '；

(3) 或 1 至多次除 空白字符 " ’ = < > ` 外的字符

例如：

在 Vue 的 parseHTML 时，就能将 id="mydiv"、class="myClass"、style="color: #ff0000"提取出来。

dynamicArgAttribute
const dynamicArgAttribute = /\s*((?:v-[\w-]+:|@|:|#)[[=]+][\s"’<>/=]*)(?:\s*(=)\s*(?:"(["]*)"+|’([’]*)’+|([\s"’=<>`]+)))?/
分析其结构：

^\s* 匹配以 0 至多个空白字符开头

捕获组：((?:v-[\w-]+:|@|:|#)[[=]+][\s"’<>/=]*)

非捕获组：(?:v-[\w-]+:|@|:|#) 匹配：

（1）v- + 1 次或多次包括下划线在内的任意单词字符 + :

（2）或 @

（3）或 :

（4）或 #

[[^=]+] 匹配 以 [ + 1 次或多次除 = 外的所有字符 + ]

[^\s"’<>/=]* 匹配 0 次或多次除 空白字符、"、’、<、>、/、= 以外的字符

非捕获组：(?:\s(=)\s(?:"(["])"+|’([’])’+|([^\s"’=<>`]+)))?
已在 attribute 章节分析过。

小结
dynamicArgAttribute 用于匹配：

以 0 至多个空白字符开头

紧接着：

（1）v- + 1 次或多次包括下划线在内的任意单词字符 + :；

（2）或 @

（3）或 :

（4）或 #

紧接着以 [ + 1 次或多次除 = 外的所有字符 + ]

匹配 0 次或多次除 空白字符、"、’、<、>、/、= 以外的字符

紧接着 0 至多个空白字符；

紧接着 =；

紧接着 0 至多个空白字符；

紧接着匹配 0 次或 1 次：

(1) " + 0 至多个除 " 外的字符 + "；

(2) 或 ’ + 0 至多个除 ’ 外的字符 + '；

(3) 或 1 至多次除 空白字符 " ’ = < > ` 外的字符

例如：

<a v-bind:[attributeName]=“url”> …
<a v-on:[eventName]=“doSomething”> …
在 Vue 的 parseHTML 时，就能将 v-bind:[attributeName]=“url” 这种动态参数提取出来。

ncname
const ncname = [a-zA-Z_][\\-\\.0-9_a-zA-Z${unicodeRegExp.source}]*
首先看 unicodeRegExp

const unicodeRegExp = /a-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD/
定义了一系列合法字符，通过 Unicode 字符集范围匹配。

unicodeRegExp.source 用于拿到正则表达式 unicodeRegExp 的字符串。

ncname 即是一系列合法字符的集合。

qnameCapture
const qnameCapture = ((?:${ncname}\\:)?${ncname})
表示匹配 xxx:xxx 或 xxx 模式的字符。

startTagOpen
const startTagOpen = new RegExp(^<${qnameCapture})
startTagOpen 可匹配标签开始部分，即：<xxx:xxx 或 <xxx 的模式。

<xxx:xxx 代表的是带命名空间的 html 标签，文可参见这里，这种类型的标签主要作用是可以指定标签的命名空间，避免冲突。Vue 对这类的标签也做了解析。

如：<div 或 <math:div

startTagClose
const startTagClose = /^\s*(/?)>/
^\s*(/?)> 匹配以 0 至多个空白字符开头，接 0 或 1 个 / ，紧接 > 的字符串。

如： />

endTag
const endTag = new RegExp(^<\\/${qnameCapture}[^>]*>)
匹配以 </ 开头，后接合法字符，后接 0 至多个除 > 以外的任何字符，最后接 > 。

如：

doctype
const doctype = /^]+>/i
匹配以 <!DOCTYPE开头，后接 1 至多次除 > 外的所有字符，后接 >。注意该匹配模式不区分大小写。

如：

comment
const comment = /^<!–/
匹配以 <!-- 开头的字符串。

如：

conditionalComment
const conditionalComment = /^<![/
匹配以 <![ 开头的字符串。条件注释主要用于做浏览器兼容等，文可参见这里

总结
本文以 Vue 源码中 parseHTML 方法为例，分析了其中定义的正则表达式，将常见的正则规则做了梳理，同时可以备查 parseHTML 方法的正则规则，方便后续继续分析该方法。

附录 1 常见正则规则
正则里的特殊字符

  • ? + . [ ] ( ) { } | ^ $，共 13 个。
  • 表示匹配前面字符（或括号括起来的表达式，或方括号括起来的字符集）0 次或 多 次；
    ?（1）? 表示匹配前面字符（或括号括起来的表达式，或方括号括起来的字符集）0 次或 1 次；（2）? 紧跟在其它任何一个限制符（如 * + 等）后时，匹配模式为非贪婪，尽可能少地匹配；
  • 表示匹配前面字符（或括号括起来的表达式，或方括号括起来的字符集）1 次或 多 次；
    . 表示匹配除换行符以外的任意字符 1 次；
    [] 字符集，表示匹配方括号内字符中的其中一个，其中的特殊字符会被当做普通字符处理；
    () 捕获组，表示匹配其中的子表达式；
    {n,m} 匹配前面表达式最少 n 次，最多 m 次
    | 或，常用在捕获组中；
    ^ 匹配字符串的开始位置
    $ 匹配字符串的结束位置
    表达式 () 中常见写法
    (pattern) 匹配 pattern 并获取该匹配；
    (?:pattern) 匹配 pattern 但不获取该匹配；
    pattern1(?=pattern2) 匹配 pattern1 后面跟 pattern2 的字符串，不获取该匹配
    pattern1(?!pattern2) 匹配 pattern1 后面不跟 pattern2 的字符串，不获取该匹配
    (?<=pattern2)pattern1 匹配 pattern1 前面为 pattern2 的字符串，不获取该匹配
    (?<!pattern2)pattern1 匹配 pattern1 前面不为 pattern2 的字符串，不获取该匹配
    字符集 [] 常见写法
    [x|y] 匹配 x 或 y，可为字符串
    [xyz] 匹配 x 或 y 或 z 的字符
    [^xyz] 匹配 非 x 或 y 或 z 的字符
    [a-z] 匹配 a 到 z 的任意小写字符
    常见特殊字符
    \b 匹配单词边界
    \d 匹配一个数字字符
    \n 匹配一个换行符
    \r 匹配一个回车符
    \t 匹配制表符
    \s 匹配任何空白字符
    \w 匹配包括下划线的任何单词字符
    USB Microphone https://www.soft-voice.com/
    Wooden Speakers https://www.zeshuiplatform.com/
    亚马逊测评 www.yisuping.cn
    深圳网站建设www.sz886.com
福伴
关注
vue正则表达式html标签,从vue模板解析学习正则表达式
weixin_34365336的博客
05-31 770
前言最近在看vue的模板解析成render这一块，顺便补一下正则的知识文件地址srccompilerparserhtml-parser.js1. attributeconst attribute = /^\s*([^\s”‘<>\/=]+)(?:\s*(=)\s*(?:”([^”]*)”+|'([^’]*)’+|([^\s”‘=<>`]+)))?/这段正则很长，他的主要作用...
【Vue源码】AST抽象语法树 - 指针- 递归 - 栈 - 正则表达式 - 手写实现parse
YK菌的博客
07-28 1237
AST手写实现
vue?parseHTML?函数源码解析
百创科技
06-28 490
先从第一部分开始讲起?var第一个变量是 stack，它被初始化为一个空数组，在 while 循环中处理 html 字符流的时候每当遇到一个非单标签，都会将该开始标签 push 到该数组。它的作用模板中 DOM 结构规范性的检测。但在一个 html 字符串中，如何判断一个非单标签是否缺少结束标签呢？假设我们有如下html?
Vue源码解析系列——模板编译篇：parseHTML的各种hook
hd101367816的博客
03-03 382
准备 vue版本号2.6.12，为方便分析，选择了runtime+compiler版本。 回顾 如果有感兴趣的同学可以看看我之前的源码分析文章，这里呈上链接：《Vue源码分析系列：目录》 parseHTML hooks 上一篇我们分析了parse方法中的parseHTML，在parseHTML中会调用很多的hooks，这些hooks定义在： parseHTML(template, { warn, expectHTML: options.expectHTML, isUnaryTag:
【vuejs深入二】vue源码解析之一，基础源码结构和htmlParse解析器
weixin_33906657的博客
04-25 261
写在前面 　　一个好的架构需要经过血与火的历练，一个好的工程师需要经过无数项目的摧残。 　　vuejs是一个优秀的前端mvvm框架，它的易用性和渐进式的理念可以使每一个前端开发人员感到舒服，感到easy。它内部的实现机制值得让我们深究，比如obServer的实现原理，为什么vue能够实现组件化等等，我们需要理解它内部的运行机制，代码结构，这样才能更深入的...
Vue源码系列讲解——模板编译篇【三】(HTML解析器)
最新发布
Miller777_的博客
02-13 1609
上篇文章中我们说到，在模板解析阶段主线函数parse中，根据要解析的内容不同会调用不同的解析器，而在三个不同的解析器中最主要的当属HTML解析器，为什么这么说呢？因为HTML解析器主要负责解析出模板字符串中有哪些内容，然后根据不同的内容才能调用其他的解析器以及做相应的处理。那么本篇文章就来介绍一下HTML解析器是如何解析出模板字符串中包含的不同的内容的。本篇文章主要介绍了HTML解析器的工作流程以及工作原理，文章比较长，但是逻辑并不复杂。首先介绍了HTML。
JavaWeb -- Json & jQuery & Ajax & 正则表达式 & 过滤器 & 监听器 & Freemarker
支棱起来
07-23 365
Json Json 又称 JavaScript 对象表示法，键和值都要用双引号包裹（当 value 是数字时可以不加双引号） JS 直接访问 json 对象 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> var json = [ {
vue 模板解析成html,Vue.js 源码学习七 —— template 解析过程学习
weixin_32641973的博客
06-19 1249
这次，来学习下Vue是如何解析HTML代码的。template 解析用在哪从之前学习 Render 的过程中我们知道，template 的编译在 $mount 方法中出现过。// src/platforms/web/entry-runtime-with-compiler.jsconst mount = Vue.prototype.$mountVue.prototype.$mount = funct...
HTML.parser和正则解析,HTMLParser 的实现和使用
weixin_42297727的博客
05-30 1121
1. 概览HTMLParser 在很多地方都有它施展拳脚的地方, 例如在 Vue 中, Vue 把 template 模板字符串编译成 render 函数的过程就用到了 HTMLParser.要注意的一点是, HTMLParser 做的工作是解析字符串并把参数传递给回调函数, 后续要执行什么操作全部依赖于传入的options中的start end comment chars等钩子函数1.1 一般的...
Vue 中的compile操作方法
08-27
在 parseHTML 函数中，最重要的是 while 循环中的代码，而在解析过程中发挥重要作用的有几个正则表达式。 Optimizer 步骤负责对 AST 进行静态节点的标记，以优化渲染过程。在这个步骤中，Vue 会对 AST 进行遍历，...
ncname:用于匹配XML NCName的正则表达式
05-26
ncname 用于匹配正则表达式 安装 $ npm install ncname 用法 const ncname = require ( 'ncname' ) ; ncname . test ( 'hællæ' ) ; //=> true ncname . test ( '$unicorn' ) ; //=> false 执照 麻省理工学院:copyright:
【Vue原理】Compile - 源码版 之 Parse 标签解析
chongzhun5695的博客
08-09 167
写文章不容易，点个赞呗兄弟 <br> <br> 专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧 研究基于 Vue版本 【2.5.17】 如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公...
vue 解析换行符 HTML 解析 textarea 换行符
热门推荐
ymumi的博客
09-04 1万+
用户在textarea中输入的换行符，传到后台，再返回前端，展示在div中。 vue 中 用 {{ }} 进行数据绑定的时候，可以看到换行符并不生效的。 如果需要div显示为与textarea 一致的效果： 解决办法1： v-html : 有安全风险，有注入攻击风险 解决办法2： 在展示的div添加样式 .pre-line { white-space: pre-line; } ...
解读Vue3模板编译优化
yyds2026的博客
11-04 448
其实 Vue3 相关的性能优化有很多，这里只单独将 patchFlag 的十分之一的内容拿出来讲了，Vue3 还没正式发布的时候就有看到说 Diff 过程会通过 patchFlag 来进行性能优化，所以打算看看他的优化逻辑，总的来说还是有所收获。
手摸手快速入门 正则表达式 (Vue源码中的使用)
郊眠寺
02-21 1241
我们知道了的一个作用就是用来以匹配开头，后面跟上标签，标签开头必须是a-zA-Z中的一个
【VUE】源码分析 - vue中的 HTMLParser，模板解析的第一步
ccuucc的博客
05-21 2353
通过本文，你可以详细了解到vue对template模板编译的第一步，也就是词法分析阶段；以及vue中HTMLParser和浏览器HTMLParser的关系和出入。
Vue2.0源码解析——编译原理
weixin_50786692的博客
09-20 1733
Vue2.0源码解析——编译原理 前言：本篇文章主要对Vue2.0源码的编译原理进行一个粗浅的分析，其中涉及到正则、高阶函数等知识点，对js的考察是非常的深的，因此我们来好好啃一下这个编译原理的部分。 一、编译流程 1.为什么需要编译流程？ 不知道各位有没有思考过这样一个问题，为什么我们无论是在脚手架项目中还是在单文件html中，只要使用Vue框架开发，我们就可以书写出千奇百怪且好用的指令，比如v-for、v-model、@event…等等，但是浏览器默认情况下是只认识原生js、css以及html的呀，为什
截取xm特定l标签中内容的正则_拿尤大大写的正则表达式处理一个业务上的问题...
weixin_39627699的博客
12-03 96
在一次crud的时候，碰到了这样一个接口返回的数据是这样子的<MachineModelmachModelId="915432156"machModelName="故障标准传动链"machLayoutStatus="0"><itemmachModelId="915432156"itemtype="7"id="915432156_1"name="行星"be...
深入浅出 Vue.js 第九章 解析器---学习笔记
weixin_30466953的博客
06-23 420
本文结合 Vue 源码进行学习 学习时，根据 github 上 Vue 项目的 package.json 文件，可知版本为 2.6.10 解析器 一、解析器的作用 解析器的作用就是将模版解析成 AST（抽象语法树） 在 Vue 中，解析 template 里面的 DOM 元素转换出来的 AST，是一个 Javascript 对象 该 AST 是使用 JavaScript 中的对象来描述一个节点 一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值