<div class="test">
    <font color="#aa533e">
        <font face="Helvetica, serif">
            <font size="1" style="font-size: 8pt">
                <span style="background: #d096ff">Hello <span data-element="retain">World</span></span>
            </font>
        </font>
    </font>
    <font color="#000000">
        <font face="Times New Roman, serif">
            <font size="2" style="font-size: 11pt">This is</font>
        </font>
    </font>
    <b>test</b> example
</div>

<div>
    Hello <span data-element="retain">World</span>
    This is
    test
    example
</div>

var inputNode = document.querySelector('.test');

treeWalker = document.createTreeWalker(
    inputNode, NodeFilter.SHOW_ALL, null, false
);
currentNode = treeWalker.nextNode();

var temp = [];
var tempDiv = document.createElement('div');
while (currentNode != null) {
    nodeType = currentNode.nodeType;
    if (nodeType === Node.COMMENT_NODE) {
        temp.push(' ');
    }
    else if (
        currentNode.tagName && currentNode.tagName.toLowerCase() === 'span' &&
        currentNode.dataset && currentNode.dataset.element && currentNode.dataset.element === "retain"
    ) {
        tempDiv.appendChild(currentNode.cloneNode(true));
        temp.push(currentNode.outerHTML);
        currentNode = treeWalker.nextNode();
    } else if (currentNode.hasChildNodes() === false) {
        tempDiv.appendChild(currentNode.cloneNode(true));
        temp.push(currentNode.textContent);
    }
    currentNode = treeWalker.nextNode();
}