从HTML代码创建一个JavaScript对象
Create a JavaScript object from HTML code
HTML
<div id="html">
<ul>
<li id="myFolder" type="folder">myFolder
<ul>
<li id="myFolder/fonts" class="empty" type="folder">fonts</li>
<li id="myFolder/index.html" type="file">index.html</li>
<li id="myFolder/js" type="folder">js
<ul>
<li id="myFolder/js/controllers" type="folder">controllers
<ul>
<li id="myFolder/js/controllers/core" type="folder">core
<ul>
<li id="myFolder/tempjs/controllerslates/core/menu.js" type="file">menu.js</li>
</ul>
</li>
<li id="myFolder/js/controllers/errors" type="folder">errors
<ul>
<li id="myFolder/js/controllers/errors/error.js" type="file">error.js</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
我想把HTML转换成几个像这样的对象:
{
"dir": "",
"name": "myFolder",
"type": "folder",
"children": [{
"dir": "myFolder",
"name": "fonts",
"type": "folder"
}, {
"dir": "myFolder",
"name": "index.html",
"type": "file"
}, {
"dir": "myFolder",
"name": "js",
"type": "folder",
"children": [{
"dir": "myFolder/js",
"name": "controllers",
"type": "folder",
"children": [{
"dir": "myFolder/js/controllers",
"name": "core",
"type": "folder",
"children": [{
"dir": "myFolder/tempjs/controllerslates/core",
"name": "menu.js",
"type": "file"
}]
}, {
"dir": "myFolder/js/controllers",
"name": "errors",
"type": "folder",
"children": [{
"dir": "myFolder/js/controllers/errors",
"name": "error.js",
"type": "file"
}]
}]
}]
}]
}
我不知道如何进行转换。我想我可以用
document.getElementsByTagName('li');
或者类似的东西。但是,我如何管理父链接和子链接,以及如何链接具有HTML属性的对象的变量?
这是我能得到的最接近的。享受
var getIdBasedStructure = function(ulContainer) {
var output = [];
Array.prototype.forEach.call(ulContainer.children, function(el) {
if (el.nodeName == "LI") {
var ret = getIdSplits(el.id, el.type);
if (el.querySelectorAll("ul").length > 0) {
output.push({
dir: ret[0],
name: ret[1],
type: ret[2],
children: getIdBasedStructure(el.querySelectorAll("ul")[0])
});
} else {
output.push({
dir: ret[0],
name: ret[1],
type: ret[2]
});
}
}
});
return output;
};
var getIdSplits = function(id, type) {
var split = id.split("/");
var ret = [];
if (split.length > 3) {
ret[2] = split[split.length - 1];
ret[1] = split.slice(0, split.length - 1).join("/");
ret[0] = type;
} else {
ret[0] = split[0] ? split[0] : null;
ret[1] = split[1] ? split[1] : null;
ret[2] = type;
}
return ret;
}
var structure = getIdBasedStructure(document.querySelectorAll("#html > ul")[0]);
console.log(JSON.stringify(structure));
<div id="html">
<ul>
<li id="myFolder" type="folder">myFolder
<ul>
<li id="myFolder/fonts" class="empty" type="folder">fonts</li>
<li id="myFolder/index.html" type="file">index.html</li>
<li id="myFolder/js" type="folder">js
<ul>
<li id="myFolder/js/controllers" type="folder">controllers
<ul>
<li id="myFolder/js/controllers/core" type="folder">core
<ul>
<li id="myFolder/tempjs/controllerslates/core/menu.js" type="file">menu.js</li>
</ul>
</li>
<li id="myFolder/js/controllers/errors" type="folder">errors
<ul>
<li id="myFolder/js/controllers/errors/error.js" type="file">error.js</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
编辑:从jQuery转换为本地javascript。
var div = document.getElementById("html");
var parent = loopul(document.getElementById("html").getElementsByTagName("ul")[0])[0]
function loopul(ul){
var lis = ul.getElementsByTagName("li");
if(lis.length>0){
var arr = [];
for(var i=0;i<lis.length;i++){
//console.log(lis[i]);
var nm = lis[i].innerText;
if(lis[i].getElementsByTagName("ul").length>0){
nm = nm.replace(lis[i].getElementsByTagName("ul")[0].innerText,"");
}
nm = nm.replace(/['n'r't]/g,"").trim();
var du = lis[i].getElementsByTagName("ul").length ? loopul(lis[i].getElementsByTagName("ul")[0]) : [];
arr.push({
"dir":lis[i].id ? lis[i].id : "",
"name":nm,
"type":lis[i].type,
"children":du
});
}
return arr;
}else return [];
}
console.log(parent);
<div id="html">
<ul>
<li id="myFolder" type="folder">myFolder
<ul>
<li id="myFolder/fonts" class="empty" type="folder">fonts</li>
<li id="myFolder/index.html" type="file">index.html</li>
<li id="myFolder/js" type="folder">js
<ul>
<li id="myFolder/js/controllers" type="folder">controllers
<ul>
<li id="myFolder/js/controllers/core" type="folder">core
<ul>
<li id="myFolder/tempjs/controllerslates/core/menu.js" type="file">menu.js</li>
</ul>
</li>
<li id="myFolder/js/controllers/errors" type="folder">errors
<ul>
<li id="myFolder/js/controllers/errors/error.js" type="file">error.js</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
相关文章:
- 我应该如何从xml文件构建一个javascript页面
- 有没有一个javascript图形绘制库可以进行气球树布局
- 如何将一个JavaScript函数回调为多个函数
- 代码背后调用一个JavaScript函数的按钮点击-C#
- 多次调用另一个javascript函数中的javascript函数
- HTML外部javascript加载另一个javascript
- 在一个javascript文件中为整个网站创建标签
- 在任何AJAX调用之前触发一个javascript函数
- 如何用另一个Javascript更改Javascript函数值
- 动态创建一个javascript/jquery多级数组
- 将变量值从一个javascript传递到另一个javascript
- 获取一个javascript对象attr's
- 是一个javascript bookmarklet,可以设置破坏跨域安全的域cookie
- PNG图像被覆盖,但每个图像都有一个链接可以更改,每次一个-Javascript/jQuery/CSS
- 添加一个javascript函数来下载elfinder上的事件
- 有没有一个Javascript代码可以看到你的缓存有多满
- 使用jenkins从不同文件夹中的文件构建一个javascript文件
- 是否有一个javascript库来解析简单的查询
- 一个javascript实现base64图像编码并将结果写入文本文件
- 使用一个Javascript函数提交多个表单可以在FF中工作,而不需要其他浏览器