如何通过 NodeJS 在线性 DOM 字符串行中添加缩进

Question

我在fomat中有一个svg字符串，如下所示：

    <g id="icons"><g class="cls-1"><path class="cls-2" d="M12,11.43c-2-.45-3.83-.85-2.94-2.54C11.79,3.75,9.79,1,6.92,1S2,3.85,4.77,8.89c.92,1.69-1,2.1-2.94,2.54C.11,11.83,0,12.67,0,14.12v.72H13.83v-.72C13.84,12.67,13.72,11.83,12,11.43Zm2.26-3.94V5.76H12.54V7.49H10.81V9.22h1.73V11h1.73V9.22H16V7.49Z"/></g><path class="cls-3" d="M12,10.43C10,10,8.18,9.58,9.07,7.89,11.79,2.75,9.79,0,6.92,0S2,2.85,4.77,7.89c.92,1.69-1,2.1-2.94,2.54C.11,10.83,0,11.67,0,13.12v.72H13.83v-.72C13.84,11.67,13.72,10.83,12,10.43Zm2.26-3.94V4.76H12.54V6.49H10.81V8.22h1.73V10h1.73V8.22H16V6.49Z"/></g>

我需要以某种方式通过在每个标签之间插入美女缩进来转换它(就像在原始 DOM 树中一样(。

所以，在这个过程结束时，我希望得到下一个：

<g id="icons">
<g class="cls-1">
    <path class="cls-2" d="M12,11.43c-2-.45-3.83-.85-2.94-2.54C11.79,3.75,9.79,1,6.92,1S2,3.85,4.77,8.89c.92,1.69-1,2.1-2.94,2.54C.11,11.83,0,12.67,0,14.12v.72H13.83v-.72C13.84,12.67,13.72,11.83,12,11.43Zm2.26-3.94V5.76H12.54V7.49H10.81V9.22h1.73V11h1.73V9.22H16V7.49Z"
    />
</g>
<path class="cls-3" d="M12,10.43C10,10,8.18,9.58,9.07,7.89,11.79,2.75,9.79,0,6.92,0S2,2.85,4.77,7.89c.92,1.69-1,2.1-2.94,2.54C.11,10.83,0,11.67,0,13.12v.72H13.83v-.72C13.84,11.67,13.72,10.83,12,10.43Zm2.26-3.94V4.76H12.54V6.49H10.81V8.22h1.73V10h1.73V8.22H16V6.49Z"
/>

关于如何使其成为现实的任何想法，或者也许有人知道npm此类任务的库？

谢谢！

Answer 1

使用以下代码片段：

在下面的SO问题中对此进行了解释：所以

var str = ' <g id="icons"><g class="cls-1"><path class="cls-2" d="M12,11.43c-2-.45-3.83-.85-2.94-2.54C11.79,3.75,9.79,1,6.92,1S2,3.85,4.77,8.89c.92,1.69-1,2.1-2.94,2.54C.11,11.83,0,12.67,0,14.12v.72H13.83v-.72C13.84,12.67,13.72,11.83,12,11.43Zm2.26-3.94V5.76H12.54V7.49H10.81V9.22h1.73V11h1.73V9.22H16V7.49Z"/></g><path class="cls-3" d="M12,10.43C10,10,8.18,9.58,9.07,7.89,11.79,2.75,9.79,0,6.92,0S2,2.85,4.77,7.89c.92,1.69-1,2.1-2.94,2.54C.11,10.83,0,11.67,0,13.12v.72H13.83v-.72C13.84,11.67,13.72,10.83,12,10.43Zm2.26-3.94V4.76H12.54V6.49H10.81V8.22h1.73V10h1.73V8.22H16V6.49Z"/></g>';
$('#out').text(process(str));
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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<pre id="out"></pre>