当你看到这篇文章意味着我辜负了@教主的殷切期望周末木有去约会，以及苏老师@我思故我在北京鼓楼的落井下石成功了……

本文demo powered by 已经结婚的@老赵的不再维护的wind.js

物是人非啊……

说回正经事，在上一篇文章中，我们取得了初步成果，毫无意义的字符变成了有意义的token。

接下来我们要把这些简单的词变成DOM树，这个过程我们是使用栈来实现的，任何语言几乎都有栈，为了给大家跑着玩我们还是用JS来实现吧，JS中的栈只要用数组就好了：

function HTMLSyntaticalParser(){

    var stack = [new HTMLDocument];

    this.receiveInput = function(token) {

        //TODO

    }

    this.getOutput = function(){

        return stack[0];

    }

}

为了构建DOM树，我们需要一个Node类，接下来我们所有的节点都会是这个Node类的实例。在完全符合标准的浏览器中，不一样的HTML节点对应了不同的Node的子类，我们为了简化，就不完整实现这个继承体系了。我们仅仅把Node分为Element和Text（如果是基于类的OOP的话，我们需要抽象工厂来创建对象。）

function Element(){

    this.childNodes = [];
}
function Text(value){
    this.value = value || "";
}

前面我们的token中，以下两个是需要成对匹配的：

  • tag start
  • tag end

于是我们的做法是遇到tag start就入栈，遇到tag end就出栈，并且校验一下是否匹配。

对于Text节点，我们则需要把相邻的Text节点合并起来，我们的做法是当字符token入栈时检查栈顶是否是Text节点，如果是的话就合并Text节点

同样我们来看看直观的解析过程：

<html maaa=a >
<head>
<title>cool</title>
</head>
<body>
<img src="a" />
</body>
</html>
parse

 
 

当我们的源代码完全遵循xhtml时，这非常简单问题，然而HTML具有很强的容错能力，奥妙在于当tag end跟栈顶的start tag不匹配的时候如何处理。

于是有一个极其复杂的规则来的，幸好w3c又一次很贴心地把全部规则都整理的很好，我们只要翻译成对应的伪代码就好了：

http://www.w3.org/html/wg/drafts/html/master/syntax.html#tree-construction

略微干净的代码可以在这个gist找到：

https://gist.github.com/wintercn/5618683#file-htmlsyntaticalparser-js

在浏览器的背后（二） —— HTML语言的语法解析的更多相关文章

  1. Android For JNI(二)——C语言中的数据类型，输出，输入函数以及操作内存地址，内存修改器

    Android For JNI(二)--C语言中的数据类型,输出,输入函数以及操作内存地址,内存修改器 当我们把Hello World写完之后,我们就可以迈入C的大门了,今天就来讲讲基本的一些数据类型 ...

  2. MVC框架入门准备（二） - 语言包类与工厂模式

    语言包类: 相关配置项 LANG_FOLDER : 语言包目录名,默认为Lang LANG_AUTO : 自动识别语言,默认为true DEFAULT_LANG : 默认语言,默认为zh-cn方法 取 ...

  3. 火狐浏览器如何使用二次验证码/虚拟MFA/两步验证/谷歌验证器？

    一般点账户名——设置——安全设置中开通虚拟MFA两步验证 具体步骤见链接  火狐浏览器如何使用二次验证码/虚拟MFA/两步验证/谷歌验证器? 二次验证码小程序于谷歌身份验证器APP的优势 1.无需下载 ...

  4. 手把手和你一起实现一个Web框架实战——EzWeb框架(二)[Go语言笔记]Go项目实战

    手把手和你一起实现一个Web框架实战--EzWeb框架(二)[Go语言笔记]Go项目实战 代码仓库: github gitee 中文注释,非常详尽,可以配合食用 上一篇文章我们实现了框架的雏形,基本地 ...

  5. 一、JavaScript概述 二、JavaScript的语法 三、JavaScript的内置对象

    一.JavaScript的概述###<1>JavaScript的概念 又称ECMAScript,和java没有任何关系 嵌入在HTML元素中的 被浏览器解释运行的 一种脚本语言. ###& ...

  6. JVM(二):Java中的语法糖

    JVM(二):Java中的语法糖 上文讲到在语义分析中会对Java中的语法糖进行解糖操作,因此本文就主要讲述一下Java中有哪些语法糖,每个语法糖在解糖过后的原始代码,以及这些语法糖背后的逻辑. 语法 ...

  7. Java语言基本语法

    Java语言基本语法 一.标识符和关键字 标识符 在java语言中,用来标志类名.对象名.变量名.方法名.类型名.数组名.包名的有效字符序列,称为“标识符”: 标识符由字母.数字.下划线.美元符号组成 ...

  8. C语言文件操作解析(五)之EOF解析(转载)

      C语言文件操作解析(五)之EOF解析 在C语言中,有个符号大家都应该很熟悉,那就是EOF(End of File),即文件结束符.但是很多时候对这个理解并不是很清楚,导致在写代码的时候经常出错,特 ...

  9. 【转】C语言文件操作解析(三)

    原文网址:http://www.cnblogs.com/dolphin0520/archive/2011/10/07/2200454.html C语言文件操作解析(三) 在前面已经讨论了文件打开操作, ...

随机推荐

  1. 修改Linux系统日期与时间date clock

    先设置日期 date -s 20080103 再设置时间 date -s 18:24:30 为了永久生效,需要将修改的时间写入CMOS. 查看CMOS的时间: #clock -r 将当前系统时间写到C ...

  2. SEO优化---学会建立高转化率的网站关键词库

    想要优化好一个网站,行业的分析,以及关键词的挖掘是必要的,有一定的关键词排名了,但是转化率和流量方面却很不理想这种情况大部分是只注重了有指数的关键词排名,而忽略了长尾关键词和一些没有指数但是可以带来巨 ...

  3. 消息队列之ZeroMQ(C++)

    ZMQ是什么? 这是个类似于Socket的一系列接口,他跟Socket的区别是:普通 的socket是端到端的(1:1的关系),而ZMQ却是可以N:M 的关系,人们对BSD套接字的了解较多的是点对点的 ...

  4. Xamarin笔记

    Xamarin学习笔记 1. Xamarin Studio自动更新下载的安装文件缓存路径:C:\Users\登录用户\AppData\Local\XamarinStudio-5.0\Cache\Tem ...

  5. elasticsearch-1.3.0 之索引代码粗略梳理

    elasticsearch-1.3.0 发送请求 创建 [root@centos ~]# curl -XPUT 172.16.136.159:9200/customer?pretty { " ...

  6. python中的函数

    Python 函数 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如print().但你也 ...

  7. bzoj3572又TM是网络流

    = =我承认我写网络流写疯了 = =我承认前面几篇博文都是扯淡,我写的是垃圾dinic(根本不叫dinic) = =我承认这道题我调了半天 = =我承认我这道题一开始是T的,后来换上真正的dinic才 ...

  8. AFNetWorking设置HTTPRequestHeaders的坑

    今天在项目中要封装一个请求头但是用如下方法总是失败: 求其原因不知道: 于是乎改用了属性对象后居然成功了..: // //  RequestManager.m //  获取天气demo // //  ...

  9. Windows下ActiveMQ下载、安装部署

    1.下载:http://activemq.apache.org/download.html 最新Windows版本   2.安装 (1) 首先配置JAVA环境变量 JAVA_HOME=D:\Progr ...

  10. debian下Apache和tomcat整合（使用apt工具）

    最近部署web系统,需要使用tomcat处理和Apache整合使用,tomcat处理JSP,Apache处理静态资源.开始不知道怎么操作,在网上查阅资料走了很多弯路.完成时候,发现其实很简单,现将配置 ...