给出这样的字符串：
' \n <div id="a">\n <span class="b">\n<span>Hello</span>\n\n\n</span> <input type="text">\n \n</div>\n '
我想像这样格式化：
<div id="a">
<span class="b">
<span>Hello</span>
</span>
<input type="text">
</div>
即结果应为:(假设2个空格用于压痕)
'<div id="a">\n <span class="b">\n <span>\n Hello\n </span>\n </span>\n <input type="text">\n</div>'
实现这一目标的最优雅方式是什么？是否有任何已知的库可以做到这一点？
注意：
>我不是在寻找HTML语法高亮,只是缩进校正
>我不打算支持整个HTML规范,像上面的例子那样纠正基本HTML就足够了
解决方法
这是我写的一个简单的递归函数,我认为它可以帮助你实现你所追求的目标.
function process(str) {
var div = document.createElement('div');
div.innerHTML = str.trim();
return format(div,0).innerHTML;
}
function format(node,level) {
var indentBefore = new Array(level++ + 1).join(' '),indentAfter = new Array(level - 1).join(' '),textNode;
for (var i = 0; i < node.children.length; i++) {
textNode = document.createTextNode('\n' + indentBefore);
node.insertBefore(textNode,node.children[i]);
format(node.children[i],level);
if (node.lastElementChild == node.children[i]) {
textNode = document.createTextNode('\n' + indentAfter);
node.appendChild(textNode);
}
}
return node;
}
然后你会像这样使用它：
process(str);
这是一个演示：
var str = '<div id="a"><span class="b"><span>Hello</span></span><input type="text"><p><b>b <i>italic</i></b></p></div>';
function process(str) {
var div = document.createElement('div');
div.innerHTML = str.trim();
return format(div,level) {
var indentBefore = new Array(level++ + 1).join(' '),indentAfter = new Array(level - 1).join(' '),textNode;
for (var i = 0; i < node.children.length; i++) {
textNode = document.createTextNode('\n' + indentBefore);
node.insertBefore(textNode,node.children[i]);
format(node.children[i],level);
if (node.lastElementChild == node.children[i]) {
textNode = document.createTextNode('\n' + indentAfter);
node.appendChild(textNode);
}
}
return node;
}
document.querySelector('#out').innerText = process(str);
<pre id="out"></pre>
