从 Vue parseHTML 来学习正则表达式

更新日期: 2021-07-05阅读: 1.3k标签: vue

写作本文的起源在于,在分析 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 = /^<!DOCTYPE [^>]+>/i
const comment = /^<!\--/
const conditionalComment = /^<!\[/

接下来一个个通过拆解表达式,来分析上述正则规则。

attribute

const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/

分析其结构:

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

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

  3. 非捕获组:(?:\s(=)\s(?:"(["]*)"+|'([']*)'+|([^\s"'=<>`]+)))?

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

小结

attribute 表达式匹配的是:

  1. 以 0 至多个空白字符开头;

  2. 紧接着 1 至多个除 空白字符 " ' < > / = 以外的字符;

  3. 紧接着 0 至多个空白字符;

  4. 紧接着 =;

  5. 紧接着 0 至多个空白字符;

  6. 紧接着匹配 0 次或 1 次:

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

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

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

例如:

<div id="mydiv" class="myClass" style="color: #ff0000" >

在 Vue 的 parseHTML 时,就能将 id="mydiv"、、提取出来。

dynamicArgAttribute

const dynamicArgAttribute = /^\s*((?:v-[\w-]+:|@|:|#)\[[^=]+\][^\s"'<>\/=]*)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/

分析其结构:

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

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

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

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

    (2)或 @

    (3)或 :

    (4)或 #

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

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

  1. 非捕获组:(?:\s(=)\s(?:"(["]*)"+|'([']*)'+|([^\s"'=<>`]+)))?

已在 attribute 章节分析过。

小结

dynamicArgAttribute 用于匹配:

  1. 以 0 至多个空白字符开头

  2. 紧接着:

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

    (2)或 @

    (3)或 :

    (4)或 #

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

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

  5. 紧接着 0 至多个空白字符;

  6. 紧接着 =;

  7. 紧接着 0 至多个空白字符;

  8. 紧接着匹配 0 次或 1 次:

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

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

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

例如:

<a v-bind:[attributeName]="url"> ... </a>
<a v-on:[eventName]="doSomething"> ... </a>

在 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 至多个除 > 以外的任何字符,最后接 > 。

如:</div>

doctype

const doctype = /^<!DOCTYPE [^>]+>/i

匹配以 <!DOCTYPE开头,后接 1 至多次除 > 外的所有字符,后接 >。注意该匹配模式不区分大小写。

如:<!DOCTYPE html>

comment

const comment = /^<!\--/

匹配以 <!-- 开头的字符串。

如:<!--STATUS OK-->

conditionalComment

const conditionalComment = /^<!\[/

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

总结

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

附录 1 常见正则规则

正则里的特殊字符

* ? + . [ ] ( ) { } | ^ $,共 13 个。
  1. * 表示匹配前面字符(或括号括起来的表达式,或方括号括起来的字符集)0 次或 多 次;
  2. ?(1)? 表示匹配前面字符(或括号括起来的表达式,或方括号括起来的字符集)0 次或 1 次;(2)? 紧跟在其它任何一个限制符(如 * + 等)后时,匹配模式为非贪婪,尽可能少地匹配;
  3. + 表示匹配前面字符(或括号括起来的表达式,或方括号括起来的字符集)1 次或 多 次;
  4. . 表示匹配除换行符以外的任意字符 1 次;
  5. [] 字符集,表示匹配方括号内字符中的其中一个,其中的特殊字符会被当做普通字符处理;
  6. () 捕获组,表示匹配其中的子表达式;
  7. {n,m} 匹配前面表达式最少 n 次,最多 m 次
  8. | 或,常用在捕获组中;
  9. ^ 匹配字符串的开始位置
  10. $ 匹配字符串的结束位置

表达式 () 中常见写法

  1. (pattern) 匹配 pattern 并获取该匹配;
  2. (?:pattern) 匹配 pattern 但不获取该匹配;
  3. pattern1(?=pattern2) 匹配 pattern1 后面跟 pattern2 的字符串,不获取该匹配
  4. pattern1(?!pattern2) 匹配 pattern1 后面不跟 pattern2 的字符串,不获取该匹配
  5. (?<=pattern2)pattern1 匹配 pattern1 前面为 pattern2 的字符串,不获取该匹配
  6. (?<!pattern2)pattern1 匹配 pattern1 前面不为 pattern2 的字符串,不获取该匹配

字符集 [] 常见写法

  1. [x|y] 匹配 x 或 y,可为字符串
  2. [xyz] 匹配 x 或 y 或 z 的字符
  3. [^xyz] 匹配 非 x 或 y 或 z 的字符
  4. [a-z] 匹配 a 到 z 的任意小写字符

常见特殊字符

  1. \b 匹配单词边界
  2. \d 匹配一个数字字符
  3. \n 匹配一个换行符
  4. \r 匹配一个回车符
  5. \t 匹配制表符
  6. \s 匹配任何空白字符
  7. \w 匹配包括下划线的任何单词字符
原文来自:https://www.cnblogs.com/lilei94/p/14968735.html


链接: https://www.fly63.com/article/detial/10559

VueJS 实际开发中会遇到的问题

VueJS 实际开发中会遇到的问题,主要写一些 官方手册 上没有写,但是实际开发中会遇到的问题,需要一定知识基础。

vue与后台交互ajax数据

Vue.js是一套构建用户界面的渐进式的前端框架。 vueJS与后台交互数据的方法我所了解的有以下几种

Vuejs讲解之:响应式、过渡效果、过渡状态

Vue是一套构建用户界面的JS渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。讲解js高级之响应式、过渡效果、过渡状态。

Vue响应式开发,深入理解Vue.js响应式原理

深入理解Vue.js响应式原理。Vue教程有关的视频都讲到,我习惯响应式开发,在更早的Angular1时代,我们叫它:数据绑定(Data Binding)。你只需要在Vue实例的 data() 块中定义一些数据,并绑定到HTML

vue中慎用style的scoped属性

在vue组件中,为了使样式私有化(模块化),不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块,这是一个非常好的举措,但是为什么要慎用呢?因为scoped往往会造成我们在修改公共组件(三方库或者项目定制的组件)的样式困难,需要增加额外的工作量

基于vue移动端UI框架有哪些?vue移动端UI框架总汇

vue现在使用的人越来越多了,这篇文章主要整理一些比较优秀的移动端ui框架,推荐给大家,例如:mint UI、vux、vonic、vant、cube-ui、Muse-ui、Vue-Carbon、YDUI等

使用webpack提升vue应用的4种方式

webpack是开发Vue单页应用必不可少的工具,它能管理复杂的构建步骤,并且优化你的应用大小和性能, 使你的开发工作流更加简单。在这篇文章中,我将解释使用webpack提升你的Vue应用的4种方式,包括:单文件组件、优化Vue构建过程、浏览器缓存管理、代码分离

Vue2.0用户权限控制解决方案

Vue-Access-Control是一套基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案,通过对路由、视图、请求三个层面的控制,使开发者可以实现任意颗粒度的用户权限控制。

组件化的概念/特性/优点,Vue组件的使用

Web 中的组件其实就是页面组成的一部分,具有高内聚性,低耦合度,互冲突等特点,有利于提高开发效率,方便重复使用,简化调试步骤等。vue 中的组件是一个自定义标签形式,扩展原生的html元素,封装可重用的代码。

Vue2实例详解与生命周期

Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!