[英]serializing dynamically created html with indentation
Having created a bunch of elements in an html document with appendChild(), I am trying to to save the modified page on the client. 在使用appendChild()在html文档中创建了一堆元素之后,我试图将修改后的页面保存在客户端上。 Sending it off to the server seems a bit unnecessary, so I've opted for :
将其发送到服务器似乎没有必要,所以我选择了:
var save = document.createElement("a");
save.classList.add("button");
save.textContent = "save";
save.download = "layout-save.html"
save.onclick = function(event) {
var output = [];
// serialize document to output
var file = new window.Blob(output,{type:"text/html"});
save.href = window.URL.createObjectURL(file);
}
document.body.appendChild(save);
However, the newly created elements aren't indented of course. 但是,新创建的元素当然不会缩进。 I've been looking at js-beautify but I also noticed that the mozilla page on parsing and serializing claims that you can use treewalker.
我一直在看js-beautify,但我也注意到有关解析和序列化的mozilla页面声称可以使用treewalker。
Would anyone know how I might go about doing such a thing? 有人知道我会怎么做吗? Or failing that, would there be a way to serialize a node without it's children in order to run a recursive loop like this :
否则,将有一种方法可以在没有子节点的情况下序列化节点,以运行如下所示的递归循环:
var output = [];
var serializer = new XMLSerializer();
function indent(node) {
var ancestor = node;
while (ancestor != document.documentElement) {
output.push(" ");
ancestor = ancestor.parentNode;
}
output.push(/* serialize node tagname + attributes */);
output.push("\n");
for (let child of node.children) {
indent(child);
}
output.push(/* node closing tag*/);
}
indent(document.documentElement);
Don't hesitate tell me if I'm barking up the wrong tree, and thank you for your time. 不要犹豫告诉我,如果我在错误的树上吠叫,并感谢您的宝贵时间。
By way of a reply to my own question, you can serialize a shallow clone to get the opening and closing tags of a node : 通过回答我自己的问题,您可以序列化浅表克隆以获取节点的开始和结束标签:
var save = document.createElement("a");
save.classList.add("button");
save.textContent = "save";
save.download = "layout.html"
save.onclick = function(event) {
document.body.removeChild(save);
var output = [];
var serializer = new XMLSerializer();
function indent(node) {
function offset(node) {
var count = 0;
var ancestor = node;
while (ancestor != document.documentElement) {
count++;
ancestor = ancestor.parentNode;
}
return "\t".repeat(count);
}
var buffer = offset(node);
var nodeClone = serializer.serializeToString(node.cloneNode(false)).replace(' xmlns="http://www.w3.org/1999/xhtml"',"");
if (node.children.length) {
let tagSplit = nodeClone.replace(/(<.+>)(<\/.+>)/,"$1<!--children-->$2").split("<!--children-->");
output.push(buffer + tagSplit[0] + "\n");
for (let child of node.children) {
indent(child);
}
output.push(buffer + tagSplit[1] + "\n");
} else {
output.push(buffer + nodeClone + "\n");
}
}
indent(document.documentElement);
var file = new window.Blob(output,{type:"text/html"});
save.href = window.URL.createObjectURL(file);
}
document.body.appendChild(save);
manually removing the xhtml namespace is a bit of a shame but since it's XMLSerializer I couldn't see any way around that. 手动删除xhtml命名空间有点可惜,但是由于它是XMLSerializer,所以我看不到任何解决方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.