javascript - implementing a system like data-reactid -
i implementing system similar data-reactid (from scratch). this: (not same purpose data-reactid used):
<!doctype html> <html> <head> <title></title> </head> <body> <div> <p></p> <p></p> <p></p> </div> </body> </html> to
<!doctype html> <html data-id="0"> <head data-id="0.0"> <title data-id="0.0.0"></title> </head> <body data-id="0.1"> <div data-id="0.1.1"> <p data-id="0.1.1.0"></p> <p data-id="0.1.1.1"></p> <p data-id="0.1.1.2"></p> </div> </body> </html> i able create json object of parsed html unable want in simpler manner, please me, same!
function mapdom(element, json) { var treeobject = {}; // if string convert 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 , assign properties object var li=lj=lk=-1; function treehtml(element, object) { ++li; object["type"] = element.nodename; var nodelist = element.childnodes; if (nodelist != null) { if (nodelist.length) { object["content"] = []; (var = 0; < nodelist.length; i++) { ++lj; if (nodelist[i].nodetype == 3) { object["content"].push(nodelist[i].nodevalue); } else { object["content"].push({}); treehtml(nodelist[i], object["content"][object["content"].length -1]); } document.getelementsbytagname(nodelist[i])[i].setattribute("data-reactid","0."+i+"."+li+"."+lj); } } } if (element.attributes != null) { if (element.attributes.length) { object["attributes"] = {}; (var = 0; < element.attributes.length; i++) { object["attributes"][element.attributes[i].nodename] = element.attributes[i].nodevalue; } } } } treehtml(element, treeobject); return (json) ? json.stringify(treeobject) : treeobject; }
like that?
function processnode(node, id) { id = !id ? "0" : string(id); node.dataset.id = id; return { id: id, type: node.nodename.tolowercase(), content: processnodelist( node.childnodes, id + "." ), attributes: processattributes( node.attributes ) } } function processnodelist(nodes, prefix){ prefix = !prefix ? "" : string(prefix); for(var out, i=0, j=0, len = (nodes && nodes.length)|0; < len; ++i){ var node = nodes[i], nt = node.nodetype; if(nt === 1){ //element value = processnode(node, prefix + j++); }else if(nt === 3){ //text-node //especially should kept, , not replaced on stringify var text = node.textcontent.replace(/[\u00a0<>&\u00ad]/g, tohtmlentity); /* //todo: move filter, applied when array built //remove all-whitespace-nodes between 2 block-nodes p,div,section,h1-h6 if((i === 0 || === nodes.length-1) && /^[\r\n\t ]*$/.test(text)){ //remove whitespace @ beginning or end of node continue; } */ //compact multiple spaces single 1 value = text.replace(/([\r\n\t ])+/g, "$1"); }else{ continue; } out || (out = []); out.push(value); } return out; } function processattributes(attrs){ for(var out, = 0, len = (attrs && attrs.length)|0; < len; ++i){ var attr = attrs[i]; if(attr.nodename === "data-id") continue; out || (out = {}); out[attr.nodename] = attr.nodevalue; } return out; } function tohtmlentity(c){ switch(c.charcodeat(0)){ case 160: return " "; case 38: return "&"; case 60: return "<"; case 62: return ">"; case 173: return "­"; } return c; } function mapdom(element) { // if string convert 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; } return processnode(element); } var tree = mapdom(document.body); console.log(json.stringify(tree, null, 4)); 
Comments
Post a Comment