Создайте объект JavaScript из HTML кода

Question

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?

Answer 1

Это самое близкое, что я мог бы получить. Наслаждаться.

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>

Edit: преобразован из JQuery в родной JavaScript.

Answer 2

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++){ 
 
\t //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>