html2json&json2html的实现

上篇文章中说到可以利用JSON这个结构化的数据进行富文本的数据传输，后端处理上也要方便很多。但没有给出具体的实现代码，这2天花了点时间把这快继续弄了下，前后端的代码都实现了，下面具体说明。

前端实现：html2json

前端实现本来准备使用已经有的html2json库，但具体看了下代码。发现这个库是基于词法分析来做的，并且依赖htmlparser.js这库。一方面JS代码量太大，另一方面执行起来也有性能问题。

于是解决浏览器的DOM解析和构建接口，几十行代码就搞定了html2json的过程。

实现原理其实很简单：

1、创建一个div

2、将text内容innerHTML到div

3、获取div的childNodes

4、遍历节点，并通过node.attributes属性获取到属性名和值

5、在递归获取字节点的属性等

6、将对象转为JSON

具体代码见：https://github.com/welefen/html2json/blob/master/src/html2json.js

整个代码也就100行左右。

不过IE6下通过node.attributes获取属性名和属性值会有一些问题，它会打印出该元素的书有属性，而不是仅仅是显性属性。目前解决整个问题的方案是通过配置属性白名单进行的，并且对于style属性，需要通过node.getAttribute('style').cssText进行。

使用方式：

var jsonResult = html2json(text);

JSON数据格式

[
        {
            "text": "welefen",
            "tag": "div",
            "attr": {
                "id": "welefen",
                "name": "suredy"
            },
            "child": [
                {
                    "text": "child",
                    "tag": "span",
                    "attr": {},
                    "child": []
                },
                {}
            ]
        },
        {
            "text": "suredy",
            "tag": "p",
            "attr": {
                "style": "font-size: 12px",
                "id": "test1"
            },
            "child": []
        },
        {}
    ]

包含text,tag,attr,child等几部分。

后端实现：json2html

后端需要将接收到的json转为html，如果不考虑安全因素的话是非常简单的，只要进行简单的拼接就可以了。由于考虑各种安全问题，所以相对要复杂点，但对象于传统的通过词法分析然后过滤要简单的多了。

需要过滤或者数据校验的数据有：

1、需要对tag进行过滤，配置白名单，不在白名单内的tag直接过滤掉

2、tag属性过滤，对不支持的tag属性直接过滤掉，不管属性值是什么。

3、对tag属性进行过滤，如对src值的过滤，href值的过滤。

4、对style的属性值进行分析，设置css属性白名单，设置css属性值的校验规则。

5、添加有些标签必须有某些属性规则，如：embed标签必须有type="application/x-shockwave-flash"，并且allowscriptaccess的值需要确定

6、添加有些标签的子元素必须有哪些属性，如：object标签的子标签param标签，必须要有allowscriptaccess属性，并且属性值是一个配置的特定值。

具体代码见： https://github.com/welefen/html2json/blob/master/src/json2html.class.php

由于每个使用场景的白名单不一样，所以需要进行很多配置，接下来会单独用一篇文章来说明如果使用。

最后附上一个DEMO地址，大家可以围观： http://www.welefen.com/lab/html2json/test/index.html#