通过createTextNode（）创建的缩进代码字符串？

debugcn 发表于 Dev

阿斯匹林

因此，我有一个字符串数组（通常包含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进行快速演示。
我宁愿不使用第三方库，也不愿在不依赖其他任何东西的情况下这样做。

宰兴

如果您的阵列数据足够干净，则应该这样做：

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);

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。