将HTML映射到JSON
我试图将HTML映射到结构完整的JSON。 有没有图书馆这样做，或者我需要写我自己的？ 我想如果没有html2json库，那么我可以把一个xml2json库作为开始。 毕竟，html只是xml的一个变体呢？
更新：好的，我应该举一个例子。 我想要做的是以下。 parsing一个html的string：
<div> <span>text</span>Text2 </div> 到一个像这样的json对象：
{ "type" : "div", "content" : [ { "type" : "span", "content" : [ "Text2" ] }, "Text2" ] }
注意 ：如果您没有注意到标签，我正在寻找一个Javascript的解决scheme
我只是写了这个function，做你想做的，试试吧，让我知道，如果它不能正常工作：
// 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中testing，我不能保证全面的浏览器支持 – 你将不得不testing这个）。
它创build一个包含HTML页面树形结构的对象，然后使用大多数现代浏览器（IE8 +，Firefox 3 + .etc）中包含的JSON.stringify() ）。 如果您需要支持较旧的浏览器，则可以包含json2.js 。
它可以采取一个DOM element或包含有效的XHTML作为参数的string （我相信，我不知道DOMParser()将在某些情况下，因为它被设置为"text/xml"或是否只是不会不提供error handling，不幸的是， "text/html"浏览器支持不佳。
通过传递一个不同的值作为element你可以很容易地改变这个函数的范围。 无论您传递什么值，都将成为JSON映射的根源。
请享用
在John Resig的htmlparser.js上构build的GitHub上的html2json＆json2html包含了一些testing用例，对我来说非常好用。
代表复杂的HTML文件将是困难的，充满了angular落的情况下，但我只是想分享一些技巧，以显示如何得到这种程序启动。 这个答案不同之处在于它使用数据抽象和toJSON方法来recursion地生成结果
下面， html2json是一个小函数，它将HTML节点作为input，并返回一个JSONstring作为结果。 要特别注意代码是如何平坦的，但是它仍然能够构build一个深度嵌套的树结构 – 所有这些都可能实现，几乎为零
// data Elem = Elem Node const Elem = e => ({ toJSON : () => ({ tagName: e.tagName, textContent: e.textContent, attributes: Array.from(e.attributes, ({name, value}) => [name, value]), children: Array.from(e.children, Elem) }) }) // html2json :: Node -> JSONString const html2json = e => JSON.stringify(Elem(e), null, ' ') console.log(html2json(document.querySelector('main')))
<main> <h1 class="mainHeading">Some heading</h1> <ul id="menu"> <li><a href="/a">a</a></li> <li><a href="/b">b</a></li> <li><a href="/c">c</a></li> </ul> <p>some text</p> </main>
有时候我在ExtJS完整框架阅读本身是JSON。
http://www.thomasfrank.se/xml_to_json.html
http://camel.apache.org/xmljson.html
在线XML到JSON转换器： http : //jsontoxml.utilities-online.info/
更新顺便说一句，为了得到JSON的问题，HTML需要有types和内容标签也是这样，或者你需要使用一些xslt转换来添加这些元素，而做JSON转换
<?xml version="1.0" encoding="UTF-8" ?> <type>div</type> <content> <type>span</type> <content>Text2</content> </content> <content>Text2</content>
这一个看起来相当不错的JSON到HTML和HTML到JSON https://github.com/andrejewski/himalaya
有一个简单的HTML到JSON转换器 。 您可以复制并粘贴HTML代码，然后单击“ 转换”将HTML转换为JSON。
还有很多在线HTML到JSON转换器 。
这可能有帮助 – “XSLTJSON：使用XSLT将XML转换为JSON”， http ://www.bramstein.com/projects/xsltjson/
