javascript - 缩进通过 createTextNode() 创建的代码字符串？

Question

所以我有一个字符串数组(通常包含 HTML 代码)，例如:

var array = ["<table>", "<thead>", "<tr>", "<th>First Name</th>"....];

我正在使用该数组创建一个串联字符串:

var htmlString = array.join("");

现在要在网页上打印/显示/显示此 HTML，我将其转换为文本并将其附加到目标 div:

var text = document.createTextNode(htmlString);
document.getElementById("nl-text").appendChild(text);

这给我的输出为:

<table><thead><tr><th>First Name</th><th>Last Name</th><th>Total Spent</th><th>Efficiency</th></tr></thead><tbody><tr><td>ABC</td><td>DEF</td><td>2547</td><td>56%</td></tr><tr><td>GHI</td><td>JKL</td><td>1256</td><td>25%</td></tr><tr><td>MNO</td><td>PQR</td><td>29847</td><td>47%</td></tr><tr><td>STU</td><td>VWQ</td><td>3255</td><td>50%</td></tr><tr><td>YZA</td><td>BCD</td><td>8744</td><td>88%</td></tr><tr><td>EFG</td><td>HIJ</td><td>9521</td><td>69%</td></tr><tr><td>KLM</td><td>NOP</td><td>1025</td><td>10%</td></tr><tr><td>QRS</td><td>TUV</td><td>6695</td><td>28%</td></tr><tr><td>WXY</td><td>ZAB</td><td>6301</td><td>36%</td></tr></tbody></table>

有什么方法可以自动缩进此代码，使其看起来像这样:

<table>
   <thead>
       <tr>
          <th>First Name</th>
          .
          .
          .
       </tr>
    </thead>
    <tbody>
    .
    .
    .
    </tbody>
</table>

代码的完整要点

var array = ["<table>", "<thead>", "<tr>", "<th>", "First Name", "</th>", "<th>", "Last Name", "</th>", "<th>", "Total Spent", "</th>", "<th>", "Efficiency", "</th>", "</tr>", "</thead>", "<tbody>", "<tr>", "<td>", "ABC", "</td>", "<td>", "DEF", "</td>", "<td>", "2547", "</td>", "<td>", "56%", "</td>", "</tr>", "<tr>", "<td>", "GHI", "</td>", "<td>", "JKL", "</td>", "<td>", "1256", "</td>", "<td>", "25%", "</td>", "</tr>", "<tr>", "<td>", "MNO", "</td>", "<td>", "PQR", "</td>", "<td>", "29847", "</td>", "<td>", "47%", "</td>", "</tr>", "<tr>", "<td>", "STU", "</td>", "<td>", "VWQ", "</td>", "<td>", "3255", "</td>", "<td>", "50%", "</td>", "</tr>", "<tr>", "<td>", "YZA", "</td>", "<td>", "BCD", "</td>", "<td>", "8744", "</td>", "<td>", "88%", "</td>", "</tr>", "<tr>", "<td>", "EFG", "</td>", "<td>", "HIJ", "</td>", "<td>", "9521", "</td>", "<td>", "69%", "</td>", "</tr>", "<tr>", "<td>", "KLM", "</td>", "<td>", "NOP", "</td>", "<td>", "1025", "</td>", "<td>", "10%", "</td>", "</tr>", "<tr>", "<td>", "QRS", "</td>", "<td>", "TUV", "</td>", "<td>", "6695", "</td>", "<td>", "28%", "</td>", "</tr>", "<tr>", "<td>", "WXY", "</td>", "<td>", "ZAB", "</td>", "<td>", "6301", "</td>", "<td>", "36%", "</td>", "</tr>", "</tbody>", "</table>"];
var htmlString = array.join("");
var text = document.createTextNode(htmlString);
document.getElementById("nl-text").appendChild(text);

<!-- HTML -->
<pre id="nl-text"></pre>

更新

• 输入 jsfiddle进行快速演示。
• 我宁愿不使用第三方库，而更愿意这样做 它不依赖于其他事物。

Answer 1

如果你的数组数据足够干净，这应该可以做到:

var htmlString = "";
var indent = 0, sw = 2;
for (i = 0; i < array.length; i++) {
    c_indent = array[i][0]=="<" ? (array[i][1]=="/" ? --indent : indent++) : indent;
    htmlString += " ".repeat(c_indent * sw) + array[i] + "\n";
}
var text = document.createTextNode(htmlString);
document.getElementById("nl-text").appendChild(text);