src\compiler\parser\html-parser.js

    1. // 匹配属性，兼容 class="some-class"/class='some-class'/class=some-class/disable 四种写法
    2. const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/
    4. // 动态属性值（如 @/:/v- 等）
    5. const dynamicArgAttribute = /^\s*((?:v-[\w-]+:|@|:|#)\[[^=]+?\][^\s"'<>\/=]*)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/
    7. // 不包含前缀名的 tag 名称
    8. const ncname = `[a-zA-Z_][\\-\\.0-9_a-zA-Z${unicodeRegExp.source}]*`
    10. // 包含前缀的 tag 名称
    11. const qnameCapture = `((?:${ncname}\\:)?${ncname})`
    13. // 开始 tag
    14. const startTagOpen = new RegExp(`^<${qnameCapture}`)
    16. // tag 结束前的内容
    17. const startTagClose = /^\s*(\/?)>/
    19. // 结束标签
    20. const endTag = new RegExp(`^<\\/${qnameCapture}[^>]*>`)
    22. // DOCTYPE 标签
    23. const doctype = /^<!DOCTYPE [^>]+>/i
    25. // 注释节点
    26. const comment = /^<!\--/
    27. // 条件注释节点
    28. const conditionalComment = /^<!\[/
    30. // 纯文本标签
    31. export const isPlainTextElement = makeMap('script,style,textarea', true)
    32. const reCache = {}
    34. // html 中特殊字符的 decode
    35. const decodingMap = {
    36.   '&lt;': '<',
    37.   '&gt;': '>',
    38.   '&quot;': '"',
    39.   '&amp;': '&',
    40.   '&#10;': '\n',
    41.   '&#9;': '\t',
    42.   '&#39;': "'"
    43. }
    45. // 匹配上面被转义的特殊字符
    46. const encodedAttr = /&(?:lt|gt|quot|amp|#39);/g
    47. const encodedAttrWithNewLines = /&(?:lt|gt|quot|amp|#39|#10|#9);/g
    49. // 是否保留 html 的换行在特殊的标签内
    50. const isIgnoreNewlineTag = makeMap('pre,textarea', true)
    51. const shouldIgnoreFirstNewline = (tag, html) => tag && isIgnoreNewlineTag(tag) && html[0] === '\n'
    53. // 将被转义的特殊字符转义回来
    54. function decodeAttr (value, shouldDecodeNewlines) {
    55.   const re = shouldDecodeNewlines ? encodedAttrWithNewLines : encodedAttr
    56.   return value.replace(re, match => decodingMap[match])
    57. }
    1. function parseHTML (html, options) {
    2.   // 用于存放 tag 的堆栈
    3.   const stack = []
    4.   // 传入的 options 之一
    5.   const expectHTML = options.expectHTML
    6.   // 传入的 options 之一，用于判断是否是一元标签
    7.   const isUnaryTag = options.isUnaryTag || no
    8.   // 传入的 options 之一，用于判断标签是否可以时自闭和标签
    9.   const canBeLeftOpenTag = options.canBeLeftOpenTag || no
    10.   // 当前字符流读入的位置
    11.   let index = 0
    12.   // 尚未 parse 的 html 字符串、stack 栈顶的标签元素
    13.   let last, lastTag
    15.   // 当 html 被 parse 完了则退出循环
    16.   while (html) {
    17.     // last 用于存放尚未被 parse 的 html
    18.     last = html
    19.     // Make sure we're not in a plaintext content element like script/style
    20.     if (!lastTag || !isPlainTextElement(lastTag)) {
    21.       // 如果内容不是在纯文本标签里（script、style、textarea）
    23.       // 获取第一个 < 出现的位置
    24.       let textEnd = html.indexOf('<')
    25.       // 如果 < 出现在第一个位置
    26.       if (textEnd === 0) {
    27.         // Comment:
    28.         // 判断是不是注释节点
    29.         if (comment.test(html)) {
    30.           // 确认是否是完整的注释节点
    31.           const commentEnd = html.indexOf('-->')
    33.           // 如果是，则根据配置要求处理
    34.           if (commentEnd >= 0) {
    35.             if (options.shouldKeepComment) {
    36.               options.comment(html.substring(4, commentEnd), index, index + commentEnd + 3)
    37.             }
    39.             // 跳转到注释结束
    40.             advance(commentEnd + 3)
    41.             // 结束当前循环
    42.             continue
    43.           }
    44.         }
    46.         // http://en.wikipedia.org/wiki/Conditional_comment#Downlevel-revealed_conditional_comment
    47.         // 如果是条件注释节点
    48.         if (conditionalComment.test(html)) {
    49.           // 确认是否是条件注释节点
    50.           const conditionalEnd = html.indexOf(']>')
    52.           // 确认是
    53.           if (conditionalEnd >= 0) {
    54.             // 跳转时注释结束
    55.             advance(conditionalEnd + 2)
    56.             // 结束当前循环
    57.             continue
    58.           }
    59.         }
    61.         // Doctype:
    62.         // 如果是 Doctype 节点
    63.         const doctypeMatch = html.match(doctype)
    64.         if (doctypeMatch) {
    65.           // 跳转时 Doctype 结束
    66.           advance(doctypeMatch[0].length)
    67.           // 结束当前循环
    68.           continue
    69.         }
    71.         // End tag:
    72.         // 结束标签
    73.         const endTagMatch = html.match(endTag)
    74.         // 如果是结束标签
    75.         if (endTagMatch) {
    76.           // 标记开始位置
    77.           const curIndex = index
    78.           // 跳到结束标签后面
    79.           advance(endTagMatch[0].length)
    80.           // 解析结束标签
    81.           parseEndTag(endTagMatch[1], curIndex, index)
    82.           continue
    83.         }
    85.         // Start tag:
    86.         // 开始标签
    87.         const startTagMatch = parseStartTag()
    88.         // 如果有对应的匹配结果，说明是开始标签
    89.         if (startTagMatch) {
    90.           // 处理并分析匹配的结果
    91.           handleStartTag(startTagMatch)
    92.           if (shouldIgnoreFirstNewline(startTagMatch.tagName, html)) {
    93.             advance(1)
    94.           }
    95.           continue
    96.         }
    97.       }
    99.       let text, rest, next
    100.       // 一直循环跳到非文本的 < 位置
    101.       if (textEnd >= 0) {
    102.         rest = html.slice(textEnd)
    103.         while (
    104.           !endTag.test(rest) &&
    105.           !startTagOpen.test(rest) &&
    106.           !comment.test(rest) &&
    107.           !conditionalComment.test(rest)
    108.         ) {
    109.           // < in plain text, be forgiving and treat it as text
    110.           next = rest.indexOf('<', 1)
    111.           if (next < 0) break
    112.           textEnd += next
    113.           rest = html.slice(textEnd)
    114.         }
    115.         text = html.substring(0, textEnd)
    116.       }
    118.       // 说明剩余的都是文本
    119.       if (textEnd < 0) {
    120.         text = html
    121.       }
    123.       // 跳过文本内容
    124.       if (text) {
    125.         advance(text.length)
    126.       }
    128.       if (options.chars && text) {
    129.         options.chars(text, index - text.length, index)
    130.       }
    131.     } else {
    132.       // 如果是纯文本 tag，则将内容视作文本处理
    133.       let endTagLength = 0
    134.       // 小写的 tag 名称
    135.       const stackedTag = lastTag.toLowerCase()
    136.       // 正则 reStackedTag 的作用是用来匹配纯文本标签的内容以及结束标签的
    137.       const reStackedTag = reCache[stackedTag] || (reCache[stackedTag] = new RegExp('([\\s\\S]*?)(</' + stackedTag + '[^>]*>)', 'i'))
    138.       const rest = html.replace(reStackedTag, function (all, text, endTag) {
    139.         endTagLength = endTag.length
    140.         if (!isPlainTextElement(stackedTag) && stackedTag !== 'noscript') {
    141.           text = text
    142.             .replace(/<!\--([\s\S]*?)-->/g, '$1') // #7298
    143.             .replace(/<!\[CDATA\[([\s\S]*?)]]>/g, '$1')
    144.         }
    145.         if (shouldIgnoreFirstNewline(stackedTag, text)) {
    146.           text = text.slice(1)
    147.         }
    148.         if (options.chars) {
    149.           options.chars(text)
    150.         }
    151.         return ''
    152.       })
    153.       index += html.length - rest.length
    154.       html = rest
    155.       parseEndTag(stackedTag, index - endTagLength, index)
    156.     }
    158.     // 如果先前的 parse 没有发生任何改变，则将 html 视作纯文本来对待
    159.     if (html === last) {
    160.       options.chars && options.chars(html)
    161.       if (process.env.NODE_ENV !== 'production' && !stack.length && options.warn) {
    162.         options.warn(`Mal-formatted tag at end of template: "${html}"`, { start: index + html.length })
    163.       }
    164.       break
    165.     }
    166.   }
    168.   // Clean up any remaining tags
    169.   parseEndTag()
    171.   // 跳过指定字符长度
    172.   function advance (n) {
    173.     index += n
    174.     html = html.substring(n)
    175.   }
    177.   // 解析开始标签
    178.   function parseStartTag () {
    179.     // 使用正则开始解析
    180.     const start = html.match(startTagOpen)
    181.     // 如果解析到了
    182.     if (start) {
    184.       const match = {
    185.         // 解析到的 tag 名称
    186.         tagName: start[1],
    187.         // tag 对应的参数名称
    188.         attrs: [],
    189.         // tag 开始的位置
    190.         start: index
    191.       }
    192.       // 跳到开始标签的后面
    193.       advance(start[0].length)
    195.       let end, attr
    196.       // 如果没有解析到起始标签的结束，并且能匹配到参数
    197.       while (!(end = html.match(startTagClose)) && (attr = html.match(dynamicArgAttribute) || html.match(attribute))) {
    198.         // 属性的起点标记
    199.         attr.start = index
    200.         // 跳转到属性的后面
    201.         advance(attr[0].length)
    202.         // 标记属性的结尾位置
    203.         attr.end = index
    204.         // push 到 attrs 中
    205.         match.attrs.push(attr)
    206.       }
    208.       // 如果已经没有属性能匹配的同时，还没有到最后一位
    209.       if (end) {
    210.         // end[1] 如果有值说明是一元标签
    211.         match.unarySlash = end[1]
    212.         // 跳到标签的结束
    213.         advance(end[0].length)
    214.         // 标记开始标签的结束为止
    215.         match.end = index
    216.         return match
    217.       }
    218.     }
    219.   }
    221.   // 处理开始标签相关信息
    222.   function handleStartTag (match) {
    223.     // tag 名
    224.     const tagName = match.tagName
    225.     // 是否是一元标签
    226.     const unarySlash = match.unarySlash
    228.     // 根据配置判断合法 html
    229.     if (expectHTML) {
    230.       // 如果上一个标签是 p，同时自身不是流式内容的标签，则直接结束 p 标签
    231.       if (lastTag === 'p' && isNonPhrasingTag(tagName)) {
    232.         parseEndTag(lastTag)
    233.       }
    234.       // 如果当前解析的标签是一个可以省略结束标签的标签，并且与上一个解析到的开始标签相同时，则会立刻关闭当前标签
    235.       if (canBeLeftOpenTag(tagName) && lastTag === tagName) {
    236.         parseEndTag(tagName)
    237.       }
    238.     }
    240.     // 判断当前标签是否为一元标签
    241.     const unary = isUnaryTag(tagName) || !!unarySlash
    242.         // 标签属性的长度
    243.     const l = match.attrs.length
    244.     // 创建一个跟标签属性同等长度的数组
    245.     const attrs = new Array(l)
    247.     // 遍历属性
    248.     for (let i = 0; i < l; i++) {
    249.              // 取出属性匹配结果
    250.       const args = match.attrs[i]
    251.       // 拿出属性对应的值
    252.       const value = args[3] || args[4] || args[5] || ''
    253.       // 根据实际情况拿取相关换行的配置
    254.       const shouldDecodeNewlines = tagName === 'a' && args[1] === 'href'
    255.         ? options.shouldDecodeNewlinesForHref
    256.         : options.shouldDecodeNewlines
    258.       // 注入到准备好的参数数组中
    259.       attrs[i] = {
    260.         // 参数名
    261.         name: args[1],
    262.         // 进行过 decode 的值
    263.         value: decodeAttr(value, shouldDecodeNewlines)
    264.       }
    266.       // 开发所需 sourcemap
    267.       if (process.env.NODE_ENV !== 'production' && options.outputSourceRange) {
    268.         attrs[i].start = args.start + args[0].match(/^\s*/).length
    269.         attrs[i].end = args.end
    270.       }
    271.     }
    273.     // 如果不是一元标签
    274.     if (!unary) {
    275.       // 则将当前标签信息入栈
    276.       stack.push({ tag: tagName, lowerCasedTag: tagName.toLowerCase(), attrs: attrs, start: match.start, end: match.end })
    277.       // 设置栈顶信息
    278.       lastTag = tagName
    279.     }
    281.     // 调用 start 钩子函数
    282.     if (options.start) {
    283.       options.start(tagName, attrs, unary, match.start, match.end)
    284.     }
    285.   }
    287.   // 解析结束标签
    288.   // 检测是否缺少闭合标签
    289.   // 处理 stack 栈中剩余的标签
    290.   // 解析 </br> 与 </p> 标签，与浏览器的行为相同
    291.   function parseEndTag (tagName, start, end) {
    292.     // pos 用于判断 html 字符串是否缺少结束标签
    293.     // lowerCasedTagName 用于存储小写的 tag 名称
    294.     let pos, lowerCasedTagName
    295.     // 空处理
    296.     if (start == null) start = index
    297.     if (end == null) end = index
    299.     // Find the closest opened tag of the same type
    300.     // 如果有 tag 名称
    301.     if (tagName) {
    302.       // 获取小写的 tag 名称
    303.       lowerCasedTagName = tagName.toLowerCase()
    304.       // 以倒叙遍历堆栈的方式查找当前 tag 的开始标枪在堆栈里的位置
    305.       for (pos = stack.length - 1; pos >= 0; pos--) {
    306.         if (stack[pos].lowerCasedTag === lowerCasedTagName) {
    307.           break
    308.         }
    309.       }
    310.     } else {
    311.       // If no tag name is provided, clean shop
    312.       // 反之位置为 0
    313.       pos = 0
    314.     }
    316.     // 如果在堆栈里找到了对应的开始位置，或者干脆当前没有对应 tagName
    317.     if (pos >= 0) {
    318.       // Close all the open elements, up the stack
    319.       // 倒叙遍历堆栈，如果开始标签后有标签，在开发环境会报出对应的错误
    320.       for (let i = stack.length - 1; i >= pos; i--) {
    321.         if (process.env.NODE_ENV !== 'production' &&
    322.           (i > pos || !tagName) &&
    323.           options.warn
    324.         ) {
    325.           options.warn(
    326.             `tag <${stack[i].tag}> has no matching end tag.`,
    327.             { start: stack[i].start, end: stack[i].end }
    328.           )
    329.         }
    330.         // 闭合该 tag
    331.         if (options.end) {
    332.           options.end(stack[i].tag, start, end)
    333.         }
    334.       }
    336.       // Remove the open elements from the stack
    337.       // 更新堆栈和栈顶信息
    338.       stack.length = pos
    339.       lastTag = pos && stack[pos - 1].tag
    340.     } else if (lowerCasedTagName === 'br') {
    341.       // 如果结束标签为 br，同时没有找到开始标签，则在此之前就地添加开始标签
    342.       if (options.start) {
    343.         options.start(tagName, [], true, start, end)
    344.       }
    345.     } else if (lowerCasedTagName === 'p') {
    346.       // 如果结束标签为 p，同时没有找到开始标签，则在此之前就地添加开始标签
    347.       if (options.start) {
    348.         options.start(tagName, [], false, start, end)
    349.       }
    350.       if (options.end) {
    351.         options.end(tagName, start, end)
    352.       }
    353.     }
    354.   }
    355. }