parseHTML() — vue Function Reference

Architecture documentation for the parseHTML() function in html-parser.ts from the vue codebase.

Function typescript CompilerSFC TemplateTransformer calls 2 called by 1

Entity Profile

CompilerSFC→ TemplateTransformer→ parseHTML() — vue Function Reference

Dependency Diagram

graph TD
  eb4d93e9_e98e_e100_79fc_397c66cc84c1["parseHTML()"]
  3c4fa7b0_c9a8_3b62_4edb_edb8676e969a["html-parser.ts"]
  eb4d93e9_e98e_e100_79fc_397c66cc84c1 -->|defined in| 3c4fa7b0_c9a8_3b62_4edb_edb8676e969a
  e259ff52_42a6_4f54_59b8_e6bf86822027["parse()"]
  e259ff52_42a6_4f54_59b8_e6bf86822027 -->|calls| eb4d93e9_e98e_e100_79fc_397c66cc84c1
  ec281e7a_bf1d_2f5a_358d_42faa6d8eca8["shouldIgnoreFirstNewline()"]
  eb4d93e9_e98e_e100_79fc_397c66cc84c1 -->|calls| ec281e7a_bf1d_2f5a_358d_42faa6d8eca8
  4048d592_0fb5_abab_2d9e_07ea4e2b2ec6["decodeAttr()"]
  eb4d93e9_e98e_e100_79fc_397c66cc84c1 -->|calls| 4048d592_0fb5_abab_2d9e_07ea4e2b2ec6
  style eb4d93e9_e98e_e100_79fc_397c66cc84c1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/compiler/parser/html-parser.ts lines 71–341

export function parseHTML(html, options: HTMLParserOptions) {
  const stack: any[] = []
  const expectHTML = options.expectHTML
  const isUnaryTag = options.isUnaryTag || no
  const canBeLeftOpenTag = options.canBeLeftOpenTag || no
  let index = 0
  let last, lastTag
  while (html) {
    last = html
    // Make sure we're not in a plaintext content element like script/style
    if (!lastTag || !isPlainTextElement(lastTag)) {
      let textEnd = html.indexOf('<')
      if (textEnd === 0) {
        // Comment:
        if (comment.test(html)) {
          const commentEnd = html.indexOf('-->')

          if (commentEnd >= 0) {
            if (options.shouldKeepComment && options.comment) {
              options.comment(
                html.substring(4, commentEnd),
                index,
                index + commentEnd + 3
              )
            }
            advance(commentEnd + 3)
            continue
          }
        }

        // https://en.wikipedia.org/wiki/Conditional_comment#Downlevel-revealed_conditional_comment
        if (conditionalComment.test(html)) {
          const conditionalEnd = html.indexOf(']>')

          if (conditionalEnd >= 0) {
            advance(conditionalEnd + 2)
            continue
          }
        }

        // Doctype:
        const doctypeMatch = html.match(doctype)
        if (doctypeMatch) {
          advance(doctypeMatch[0].length)
          continue
        }

        // End tag:
        const endTagMatch = html.match(endTag)
        if (endTagMatch) {
          const curIndex = index
          advance(endTagMatch[0].length)
          parseEndTag(endTagMatch[1], curIndex, index)
          continue
        }

        // Start tag:
        const startTagMatch = parseStartTag()
        if (startTagMatch) {
          handleStartTag(startTagMatch)
          if (shouldIgnoreFirstNewline(startTagMatch.tagName, html)) {
            advance(1)
          }
          continue
        }
      }

      let text, rest, next
      if (textEnd >= 0) {
        rest = html.slice(textEnd)
        while (
          !endTag.test(rest) &&
          !startTagOpen.test(rest) &&
          !comment.test(rest) &&
          !conditionalComment.test(rest)
        ) {
          // < in plain text, be forgiving and treat it as text
          next = rest.indexOf('<', 1)
          if (next < 0) break
          textEnd += next
          rest = html.slice(textEnd)