vue模版解析正则使用就html模版前标签处理

持续创作，加速成长！这是我参与「编程 · 10 月更文挑战」的第21天，点击查看活动详情

我们在文章 模版转成AST树的逻辑上的匹配过程介绍一个匹配的过程逻辑，这篇介绍一下细节，主要是怎么用用正则进行匹配，正则的表达式咱们主要是在vue2的源码的，需要自己复制一下，就不自己写了，咱们来看下位置吧 github.com/vuejs/vue/b… 我们用的就是这个位置的正则 看一下每个正则可以匹配什么，下面是我们这次用到的正则，

// 正则匹配标签 
// 可以匹配id = “app” id = 'app' id = app
const attribute =
  /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/
// 匹配标签名 my-header 自定义标签
const ncname = `[a-zA-Z_][\\-\\.0-9_a-zA-Z]*`
// 匹配特殊的 my:header 这种标签
const qnameCapture = `((?:${ncname}\\:)?${ncname})`
//<匹配div
const startTagOpen = new RegExp(`^<${qnameCapture}`)
// > />
const startTagClose = /^\s*(\/?)>/
// 匹配</div>
const endTag = new RegExp(`^<\\/${qnameCapture}[^>]*>`)

我们拿到了这个正则，就可以对模版字符串进行处理了，方式在上一篇文章也说了，就是进行while循环，咱们来看看循环里的具体逻辑

function paresHtmlToAst(html) {
  while(html){ // 使用了while循环
     // 首先需要判断是不是开始标签
     let textEnd = html.indexOf('<') // 尖括号找到了说明时第一项，没找到说明不是
      if (textEnd==0) {// 找到了
        // 交给开始函数去做
        const startTagMatch = parseStartTag()
     }
  }
  function parseStartTag() { // 这个函数树主要做开始标签处理的，
      const start = html.match(startTagOpen) // 这里我们就用到了startTagOpen的这个正则，他是专门为找开始标签使用的 
      //咱们log就是下面截图，我们看到的具体信息
      // 我们拿到信息之后首先要生成一个tagname 后面做AST树要用这个数据
      if (start) {
          const match = {
            tagName: start[1],
            attrs: [],
          }
          // 对html进行切割
          advance(start[0].length)
      }    
  }
  
   // 截取字符串方法
  function advance(n) {
    html = html.substring(n)
  }
}

被切割后的模板图片

第一步切割已经完成了 后面继续