HTMLLexicalParser.prototype.startTagState = function(c) { if(c.match(/[a-zA-Z]/)) { this.token.push(c.toLowerCase()) return this.startTagState } if(c === ' ') { this.emitToken('startTag', this.token.join('')) this.token = [] return this.attrState } if(c === '>') { this.emitToken('startTag', this.token.join('')) this.token = [] return this.start } }
HTMLLexicalParser.prototype.endTagState = function(c) { if(c.match(/[a-zA-Z]/)) { this.token.push(c.toLowerCase()) return this.endTagState } if(c === '>') { this.token.push(c) this.emitToken('endTag', this.token.join('')) this.token = [] return this.start } }
最后只有属性标签需要处理了，也就是上面看到的 attrState 函数，也处理三种情形
如果是字母、单引号、双引号、等号，则认定为依旧处于属性标签态
如果遇到空格，则表示属性标签态结束，接下来进入新的属性标签态
如果遇到>，则认定为属性标签态结束，接下来开始新的节点信息
代码如下
HTMLLexicalParser.prototype.attrState = function(c) { if(c.match(/[a-zA-Z'"=]/)) { this.token.push(c) return this.attrState } if(c === ' ') { this.emitToken('attr', this.token.join('')) this.token = [] return this.attrState } if(c === '>') { this.emitToken('attr', this.token.join('')) this.token = [] return this.start } }
最后我们提供一个 parse 解析函数，和可能用到的 getOutPut 函数来获取结果即可，就不啰嗦了，上代码
HTMLLexicalParser.prototype.parse = function() { var state = this.start; for(var c of this.htmlString.split('')) { state = state.bind(this)(c) } } HTMLLexicalParser.prototype.getOutPut = function() { return this.tokens }
接下来简单测试一下，对于 <p data="js">测试并列元素的</p><p data="js">测试并列元素的</p> HTML 字符串，输出结果为
看上去结果很 nice，接下来进入语法分析步骤
语法分析
首先们需要考虑到的情况有两种，一种是有多个根元素的，一种是只有一个根元素的。
我们的节点有两种类型，文本节点和正常节点，因此声明两个数据结构。
function Element(tagName) { this.tagName = tagName this.attr = {} this.childNodes = [] } function Text(value) { this.value = value || '' }
目标：将元素建立起父子关系，因为真实的 DOM 结构就是父子关系，这里我一开始实践的时候，将 childNodes 属性的处理放在了 startTag token 中，还给 Element 增加了 isEnd 属性，实属愚蠢，不但复杂化了，而且还很难实现。
仔细思考 DOM 结构，token 也是有顺序的，合理利用栈数据结构，这个问题就变的简单了，将 childNodes 处理放在 endTag 中处理。具体逻辑如下
如果是 startTag token，直接 push 一个新 element
如果是 endTag token，则表示当前节点处理完成，此时出栈一个节点，同时将该节点归入栈顶元素节点的 childNodes 属性，这里需要做个判断，如果出栈之后栈空了，表示整个节点处理完成，考虑到可能有平行元素，将元素 push 到 stacks。
如果是 attr token，直接写入栈顶元素的 attr 属性
如果是 text token，由于文本节点的特殊性，不存在有子节点、属性等，就认定为处理完成。这里需要做个判断，因为文本节点可能是根级别的，判断是否存在栈顶元素，如果存在直接压入栈顶元素的 childNodes 属性，不存在 push 到 stacks。
代码如下
function HTMLSyntacticalParser() { this.stack = [] this.stacks = [] } HTMLSyntacticalParser.prototype.getOutPut = function() { return this.stacks } // 一开始搞复杂了，合理利用基本数据结构真是一件很酷炫的事 HTMLSyntacticalParser.prototype.receiveInput = function(token) { var stack = this.stack if(token.type === 'startTag') { stack.push(new Element(token.value.substring(1))) } else if(token.type === 'attr') { var t = token.value.split('='), key = t[0], value = t[1].replace(/'|"/g, '') stack[stack.length - 1].attr[key] = value } else if(token.type === 'text') { if(stack.length) { stack[stack.length - 1].childNodes.push(new Text(token.value)) } else { this.stacks.push(new Text(token.value)) } } else if(token.type === 'endTag') { var parsedTag = stack.pop() if(stack.length) { stack[stack.length - 1].childNodes.push(parsedTag) } else { this.stacks.push(parsedTag) } } }
简单测试如下：
没啥大问题哈
解释执行
对于上述语法分析的结果，可以理解成 vdom 结构了，接下来就是映射成真实的 DOM，这里其实比较简单，用下递归即可，直接上代码吧