vue/vue-design @ 3f3210c36f5096165c1221b58b3dbc34530596b9

Vue 中的 html-parser

打开 src/compiler/parser/html-parser.js 文件，该文件的开头是一段注释：

/**
 * Not type-checking this file because it's mostly vendor code.
 */

/*!
 * HTML Parser By John Resig (ejohn.org)
 * Modified by Juriy "kangax" Zaytsev
 * Original code by Erik Arvidsson, Mozilla Public License
 * http://erik.eae.net/simplehtmlparser/simplehtmlparser.js
 */

通过这段注释我们可以了解到，Vue 的 html parser 的灵感来自于 John Resig 所写的一个开源项目：http://erik.eae.net/simplehtmlparser/simplehtmlparser.js，实际上，我们上一小节所讲的小例子就是在这个项目的基础上所做的修改。Vue 在此基础上做了很多完善的工作，下面我们就探究一下 Vue 中的 html parser 都做了哪些事情。

正则分析

代码正文的一开始，是两句 import 语句，以及定义的一些正则常量：

import { makeMap, no } from 'shared/util'
import { isNonPhrasingTag } from 'web/compiler/util'

// Regular Expressions for parsing tags and attributes
const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/
// could use https://www.w3.org/TR/1999/REC-xml-names-19990114/#NT-QName
// but for Vue templates we can enforce a simple charset
const ncname = '[a-zA-Z_][\\w\\-\\.]*'
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

这与上之前我们讲解的小例子中所定义的正则的作用基本是一致的，只不过 Vue 所定义的正则更加严谨和完善，我们一次看一下这些正则的作用。首先看一下 attribute 常量：

// Regular Expressions for parsing tags and attributes
const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/

attribute 顾名思义，这个正则的作用是用来匹配标签的属性(attributes)的，如下图所示：

我们在观察一个复杂表达式的时候，主要就是要观察它有几个分组(准确的说应该是有几个捕获的分组)，通过上图我们能够清晰的看到，这个表达式一个有五个捕获组，第一个捕获组用来匹配属性名，第二个捕获组用来匹配等于号，第三、第四、第五个捕获组都是用来匹配属性名的，这是因为在 html 标签中有三种写属性值的方式：

1、使用双引号把值引起来：class="some-class"
2、使用单引号把值引起来：class='some-class'
3、不适用引号：class=some-class

正因如此，需要三个正则分组分别匹配三种情况，我们可以对这个正则做一个测试，如下：

const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/
console.log('class="some-class"'.match(attribute))  // 测试双引号
console.log("class='some-class'".match(attribute))  // 测试单引号
console.log('class=some-class'.match(attribute))  // 测试无引号

对于双引号的情况，我们将得到以下结果：

[
    'class="some-class"',
    'class',
    '=',
    'some-class',
    undefined,
    undefined
]

数组共有从 0 到 5 六个元素，第 0 个元素是被整个正则所匹配的结果，从第 1 至第 5 个元素分别对应五个捕获组的匹配结果，我们可以看到，第 1 个元素对应第一个捕获组，匹配到了属性名(class)；第 2 个元素对应第二个捕获组，匹配到了等号(=)；第 3 个元素对应第三个捕获组，匹配到了带双引号的属性值；而第 4 和第 5 个元素分别对应第四和第五个捕获组，由于没有匹配到所以都是 undefined。

所以通过以上结果我们很容易想到当属性值被单引号起来和不使用引号的情况，所得到的匹配结果是什么，变化主要就在数组的第 3、4、5 个元素，匹配到哪种情况，那么对应的位置就是属性值，其他位置则是 undefined，如下：

// 对于单引号的情况
[
    'class="some-class"',
    'class',
    '=',
    undefined,
    'some-class',
    undefined
]
// 对于没有引号
[
    'class="some-class"',
    'class',
    '=',
    undefined,
    undefined,
    'some-class'
]

ncname

接下来一句代码如下：

// could use https://www.w3.org/TR/1999/REC-xml-names-19990114/#NT-QName
// but for Vue templates we can enforce a simple charset
const ncname = '[a-zA-Z_][\\w\\-\\.]*'

注意 ncname 常量不是一个正则表达式，它仅仅是一个字符串，只不过这个字符串将来要用在 new RegExp() 中，所以我们可以在喻意上将其理解为一个正则，它主要用来匹配：不包含冒号(:)的 XML 名称，大家可以在这里找到关于 ncname 的概念，它实际上是一个术语。我们也能在 Vue 的源码中看到其给出了一个连接：https://www.w3.org/TR/1999/REC-xml-names-19990114/#NT-QName，这个链接的内容定义了一个合法的XML文档中的限定名(qname)是怎么样的。

上面的解释稍微有点不容易理解，简单的说，一个合法的标签名应该是这样的：

<>

9.Vue中的html-parser.md 5.5 KB 文件歷史 原始文件

Vue 中的 html-parser

正则分析

attribute

ncname

9.Vue中的html-parser.md 5.5 KB

文件歷史原始文件