我正在尝试将HTML映射到结构完整的JSON中。那里有没有这样做的库,还是我需要编写自己的库?我想如果没有html2json库,我可以以xml2json库作为开始。毕竟,html只是xml的一种变体,对吗?
更新: 好的,我应该举一个例子。我想做的是以下内容。解析html字符串:
<div> <span>text</span>Text2 </div>
变成这样的json对象:
{ "type" : "div", "content" : [ { "type" : "span", "content" : [ "Text2" ] }, "Text2" ] }
注意 :如果您没有注意到标签,我正在寻找Javascript解决方案
我只是写了这个函数来实现您想要的功能,请尝试一下,让我知道它是否无法正常工作:
// Test with an element. var initElement = document.getElementsByTagName("html")[0]; var json = mapDOM(initElement, true); console.log(json); // Test with a string. initElement = "<div><span>text</span>Text2</div>"; json = mapDOM(initElement, true); console.log(json); function mapDOM(element, json) { var treeObject = {}; // If string convert to document Node if (typeof element === "string") { if (window.DOMParser) { parser = new DOMParser(); docNode = parser.parseFromString(element,"text/xml"); } else { // Microsoft strikes again docNode = new ActiveXObject("Microsoft.XMLDOM"); docNode.async = false; docNode.loadXML(element); } element = docNode.firstChild; } //Recursively loop through DOM elements and assign properties to object function treeHTML(element, object) { object["type"] = element.nodeName; var nodeList = element.childNodes; if (nodeList != null) { if (nodeList.length) { object["content"] = []; for (var i = 0; i < nodeList.length; i++) { if (nodeList[i].nodeType == 3) { object["content"].push(nodeList[i].nodeValue); } else { object["content"].push({}); treeHTML(nodeList[i], object["content"][object["content"].length -1]); } } } } if (element.attributes != null) { if (element.attributes.length) { object["attributes"] = {}; for (var i = 0; i < element.attributes.length; i++) { object["attributes"][element.attributes[i].nodeName] = element.attributes[i].nodeValue; } } } } treeHTML(element, treeObject); return (json) ? JSON.stringify(treeObject) : treeObject; }
工作示例:http : //jsfiddle.net/JUSsf/(在chrome中测试,我不能保证完全支持浏览器- 您必须对此进行测试)。
它将创建一个对象,该对象包含您请求格式的HTML页面的树状结构,然后使用JSON.stringify()大多数现代浏览器(IE8 +,Firefox 3+等)中包含的结构; 如果您需要支持较旧的浏览器,则可以包含json2.js。
JSON.stringify()
它可以使用a DOM element或string包含有效XHTML的参数作为参数(我相信,我不确定DOMParser()在某些情况下,will 是否会因设置为true而窒息,"text/xml"或者只是不提供错误处理。不幸的是"text/html",浏览器支持不佳)。
DOM element
string
DOMParser()
"text/xml"
"text/html"
您可以通过传递一个不同的值来轻松更改此函数的范围element。传递的任何值都将成为JSON映射的根。
element
请享用