parseHTML() — vue Function Reference

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

Function typescript VueCore Observer calls 2 called by 1

Entity Profile

VueCore→ Observer→ parseHTML() — vue Function Reference

Dependency Diagram

graph TD
  62dcc405_082c_cdd0_ae44_f0d60c4be8d0["parseHTML()"]
  3e4fe868_3184_a713_88c2_eb0e9a4c1aec["html-parser.ts"]
  62dcc405_082c_cdd0_ae44_f0d60c4be8d0 -->|defined in| 3e4fe868_3184_a713_88c2_eb0e9a4c1aec
  19a26691_f7c4_e2d6_e9ed_59c6aff144df["parse()"]
  19a26691_f7c4_e2d6_e9ed_59c6aff144df -->|calls| 62dcc405_082c_cdd0_ae44_f0d60c4be8d0
  8203566a_57c8_ac84_f018_41cd24d3fd0a["shouldIgnoreFirstNewline()"]
  62dcc405_082c_cdd0_ae44_f0d60c4be8d0 -->|calls| 8203566a_57c8_ac84_f018_41cd24d3fd0a
  283395ca_6426_1451_6c69_40d960833781["decodeAttr()"]
  62dcc405_082c_cdd0_ae44_f0d60c4be8d0 -->|calls| 283395ca_6426_1451_6c69_40d960833781
  style 62dcc405_082c_cdd0_ae44_f0d60c4be8d0 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)