对模版开始标签的属性处理

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第22天，点击查看活动详情

上次我们把模版字符串的前标签处理了，我们继续处理 vue模版解析正则使用就html模版前标签处理 处理完的数据图片

这次我们需要处理是属性，分别id,style和class 的属性， 在我们代码上新增一个end和attrs 我们需end 是判断是不是最后尖括号用的 attr就是放属性用的，然后就是给标识赋值了,咱们来看一下我们需要的正则表达是

  function parseStartTag() {
    const start = html.match(startTagOpen)
    // 是不是最后
    let end = '';
    // 有没有属性
    let attr = '';
    console.log(start)
    if (start) {
      const match = {
        tagName: start[1],
        attrs: [],
      }
      advance(start[0].length)
      console.log(html)
      // 循环 解释的注释是这一块
      // (end=html.match(startTagClose) 匹配标签的尖括号如 > />
      // (attr=html.match(attribute) 主要是匹配属性如id="app" id='app' id=app
      // 具体的这个正则大家可以看我之前的文章那里有
      while(!(end=html.match(startTagClose))&&(attr=html.match(attribute))) {
        // 大家可以可以看下我们匹配出来的数据 
        // 按照我们上图给的属性，我们会循环三次 把 id class style 都会拿到
        // 最后会匹配到 >或/> 一个标签玄幻完成
        console.log(attr)
         match.attrs.push({ // 我们就可以拼接了
          name:attr[1],
          value: attr[3]||attr[4]||attr[5]
        })
        // 匹配完了就删了
        advance(attr[0].length)
      }
      if (end) { 在这里说明已经匹配到了end 开始标签已经结束了
        console.log(end)
        advance(end[0].length)
         console.log(match)
        return match
      }
    }
    return {}
  }

这是我们匹配出来的数据，数据id会有三种不同的形式如 id='app' id=app,这三种匹配出来的数据会在不同位置所以我们写的时候需要做兼容

可以看下我们开始标签处理完的打一出来的数据是什么样子的,后面我们就要做个开始标签的AST树