使用javascript将嵌套列表转换为缩进的纯文本

Question

I was wondering if is there any way to convert the following HTML list into indented plain text, i've tried the following solution with jQuery (but unfortunately, it add a tab character to the pre.code html element as well, when it should be only on the console.log output)

  function serializeCode() { $.each($("pre.code"), function() { if ($(this).parent().parent().hasClass("multiline")) { console.log($(this).prepend("\\t").text()); } }); } 

 <style> pre.code {display:none} </style> <ul id="list"> <li> <pre class="visual">Comando 1</pre> <pre class="code">command1</pre> </li> <li> <pre class="visual">Comando 2 {</pre> <pre class="code">command2 {</pre> <ul class="multiline"> <li> <pre class="visual">Comando 3</pre> <pre class="code">command3</pre> </li> </ul> <pre class="visual">}</pre> <pre class="code">}</pre> </li> </ul> 

Plain text output

Comando 1
Comando 2 {
    Comando 3
}

Answer 1

I solved it!

The function below iterate through all pre.code elements on the list, and add a tab character ( \\t ) on the beginning of elements that have a parent with the multiline class.

function serializeCode() {
    console.clear();
    $.each($("pre.code"), function() {
        if ($(this).parent().parent().hasClass("multiline")) {
            console.log("\t" + $(this).text());
        } else {
            console.log($(this).text());
        }
    });
}

Answer 2

var a = '';
$.each($('.visual'), function () {
a += $(this).text() + '\n';
});
alert(a);