asprin asprin - 25 days ago 9
Javascript Question

Indent code string created via createTextNode()?

So I have an array of strings (which typically contains HTML code) such as:

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


I'm creating a concatenated string out of that array using:

var htmlString = array.join("");


Now to print/show/display this HTML on a webpage, I'm converting it to text and appending it to the target div:

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


This is giving me the output as:

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


Is there any way I can auto-indent this code so that it looks something like this:

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


Full gist of the code



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>


Update




  • Putting in a jsfiddle for quick demo.

  • I would rather not use a third-party library and would prefer doing
    it without any dependency on other things.


Answer

If your array data are clean enough, this should do it:

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