「.vue文件的编译」2. 模板编译之 simple-html-parser.js

<div id="app" class="container">
  <div @click="clickHandler">
    before
    <span v-if="showSpan">span tag</span>
    <div v-for="item in items">
      <span> {{ item }}</span>
    </div>
  </div>
</div>

// Regular Expressions for parsing tags and attributes
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}[^>]*>`)

// Special Elements (can contain anything)
export const isPlainTextElement = makeMap('script,style,textarea', true)

export function parseHTML(html, options) {
    const stack = []
    const isUnaryTag = options.isUnaryTag || 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)) {
          // ... 普通场景（初始时或者，上一次解析的标签不是 scritp、style、textarea时）
        } else {
           //... lastTag 是 script、style、textarea 场景
           // 如 <script> .... </script>
        }

        // html是纯文本时，会进入下面的if
        // 看了半天还是下面的回调options.chars验证了想法
        if (html === last) { 
            options.chars &amp;&amp; options.chars(html)
            break
        }
    }

    // Clean up any remaining tags
    parseEndTag()

    function advance(n) {
        index += n
        html = html.substring(n)
    }

    function parseStartTag() {
      //... 
      // 找出 `<div id='app' ...各种属性 >` 中间的各种属性，截止到 `>` 或者`/>`
    }

    function handleStartTag(match) {
      //... 转换一下 parseStartTag 收集的属性为[{name, value}]形式
      // 如果不是一元标签(<img src='' />)，则将该tag入栈
      // 一元标签在这里实际上是代表已经闭合了标签，也就是已经处理完的标签，对此不需要入栈
      // 而 <div
    }

    function parseEndTag(tagName, start, end) {
       //...
    }
}

let textEnd = html.indexOf('<')
// 处理可能是标签的场景，如<div 或者 </div
if (textEnd === 0) {
  // ... 注释、条件注释、Doctype 场景，暂忽略

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

  // Start tag: 如 <div
  const startTagMatch = parseStartTag()
  if (startTagMatch) {
    handleStartTag(startTagMatch)
    continue
  }
}

// 下面是处理普通文本的场景
let text, rest, next
if (textEnd >= 0) {
  rest = html.slice(textEnd)
  // ... 处理 text 中 有 < 字符的场景，暂忽略
  text = html.substring(0, textEnd)
}

if (textEnd < 0) {
  text = html
}

if (text) {
  advance(text.length)
}

if (options.chars &amp;&amp; text) {
  options.chars(text, index - text.length, index)
}