Javascript:如何更正HTML字符串中的缩进? [英] Javascript: How to correct indentation in HTML string?
本文介绍了Javascript:如何更正HTML字符串中的缩进?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
给出这样的字符串:
' \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个空格)
i.e. the result should be: (assume 2 spaces for indentation)
'<div id="a">\n <span class="b">\n <span>\n Hello\n </span>\n </span>\n <input type="text">\n</div>'
实现这一目标最优雅的方法是什么?是否有任何已知的库可以做到这一点?
What's the most elegant way to achieve this? Are there any known libraries that do that?
注意:
- 我不是在寻找HTML语法高亮,只是缩进校正
- 我不打算支持整个HTML规范,纠正基本HTML就像上面的例子就足够了
推荐答案
这是我写的一个简单的递归函数,我认为可能有助于你实现你在追求什么。
Here is a simple recursive function I wrote, which I think might help you to achieve what you are after.
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;
}
然后你会像这样使用它:
Then you would use it like this:
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, 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;
}
document.querySelector('#out').innerText = process(str);
<pre id="out"></pre>
这篇关于Javascript:如何更正HTML字符串中的缩进?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文