compile.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
<script>
  // 使用有限状态自动机将模板切割为token数组
  const State = {
    initial: 1,   // 初始状态
    tagOpen: 2,   // 标签开始状态
    tagName: 3,   // 标签名称状态
    text: 4,      // 文本状态
    tagEnd: 5,    // 结束标签状态
    tagEndName: 6 // 结束标签名称状态
  }

  const isAlpha = (char) => { // 用于判断是否是字母
    return char >= 'a' && char <= 'z' || char >= 'A' && char <= 'Z'
  }


  const tokenize = (str) => {
    let currentState = State.initial
    const chars = [] // 用于缓存字符
    const tokens = [] // 存储生成的token，并作为函数返回值进行返回
    while (str) { // 使用while循环开启自动机，只要str没有被消费尽，自动机就会一直运行
      const char = str[0]
      switch (currentState) {
        case State.initial:
          if (char === '<') {
            currentState = State.tagOpen
            str = str.slice(1)
          } else if (isAlpha(char)) {
            currentState = State.text
            chars.push(char)
            str = str.slice(1)
          }
          break;
        case State.tagOpen:
          if (isAlpha(char)) {
            currentState = State.tagName
            chars.push(char)
            str = str.slice(1)
          } else if (char === '/') {
            currentState = State.tagEnd
            str = str.slice(1)
          }
          break;
        case State.tagName:
          if (isAlpha(char)) {
            chars.push(char)
            str = str.slice(1)
          } else if (char === '>') {
            currentState = State.initial
            tokens.push({
              type: 'tag',
              name: chars.join('')
            })
            chars.length = 0
            str = str.slice(1)
          }
          break;
        case State.text:
          if (isAlpha(char)) {
            chars.push(char)
            str = str.slice(1)
          } else if (char === '<') {
            currentState = State.tagOpen
            tokens.push({
              type: 'text',
              content: chars.join('')
            })
            chars.length = 0
            str = str.slice(1)
          }
          break;
        case State.tagEnd:
          if (isAlpha(char)) {
            currentState = State.tagEndName
            chars.push(char)
            str = str.slice(1)
          }
          break;
        case State.tagEndName:
          if (isAlpha(char)) {
            chars.push(char)
            str = str.slice(1)
          } else if (char === '>') {
            currentState = State.initial
            tokens.push({
              type: 'tagEnd',
              name: chars.join('')
            })
            chars.length = 0
            str = str.slice(1)
          }
          break;
      }
    }
    return tokens
  }


  console.log(tokenize('<div><p>vue</p><p>template</p></div>'));


</script>
</html>