解决问题:
考虑到文本中可能有多个 {{...}} 文本的存在, 并且还需要知道 {{...}} 所处的 index, 所以使用 RegExp.prototype.exec 就可以直接得到 {{...}} 里的键名, index 的值, 然后赋值给 match, 之后套入到一个 while 循环中执行, 千万不能写成这样, 会导致死循环, 原因在上面 exec 的 mdn 文档中有解释:
image.png
需要这样写:
image.png
之后有几个 {{...}} 文本, while 循环就会执行几次, 得出 match 的值:
image.png
如上图, 因为已经拥有了 index, 所以我们现在可以将 {{...}} 前的文字拿出来放进 textList 中:
image.png
然后将 {{...}} 里的键名作为 tag 传入 textList 中并将 lastIndex 置为该 {{...}} 文本之后:
image.png
这时候打印 textList 发现从最后一个 {{...}} 文本到文本开头的的所有文本都已经做好了分类, 并且 lastIndex 也已经为最后一个 {{...}} 的最后一个花括号所在的 index 了:
image.png
剩下的就是将剩余文本也作为普通文本放入 textList 中, 因为上面的 lastIndex 的位置, 所以我们直接通过 lastIndex 和文本的长度判断可知最后面是否有文本需要进行 compile:
image.png
image.png
注意这一步不能放在 while 循环中做, 否则会导致重复的文本放入
image.png
来源: http://www.jianshu.com/p/2d5c1eccc571