标签 javascript html json
<分区>
我正在尝试将 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 页面树结构的对象，然后使用大多数现代浏览器(IE8+、Firefox 3+)中包含的 JSON.stringify() 。ETC);如果您需要支持旧版浏览器，您可以包含 json2.js .
它可以将包含有效 XHTML 的 DOM 元素或 string 作为参数(我相信，我不确定 DOMParser() 是否会阻塞某些情况，因为它设置为 "text/xml" 或者它是否不提供错误处理。不幸的是 "text/html" 浏览器支持很差)。
您可以通过将不同的值作为 element 传递来轻松更改此函数的范围。无论您传递什么值，都将是您的 JSON 映射的根。
关于javascript - 将 HTML 映射到 JSON，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29323367/