使用JavaScript在DOM中展平嵌套跨度以优化HTML编辑器输出

Question

我需要使用JavaScript重新格式化输入HTML,以便生成的输出HTML始终是一个只<p>包含一个或多个节点的节点序列,每个节点应该只包含一个节点.<span><span> #text

举个例子,我想转换看起来像这样的HTML:

<p style="color:red">This is line #1</p>
<p style="color:blue"><span style="color:yellow"><span style="color:red">This is</span> line #2</span></p>
<p style="color:blue"><span style="color:yellow"><span style="color:green">This is line #3</span></span>
<p style="color:blue"><span style="color:yellow">This is</span><span style="color:red">line #4</span></span></p>

对于看起来像这样的HTML:

<p style="color:red"><span style="color:red">This is line #1</span></p>
<p style="color:red"><span style="color:red">This is</span><span style="color:yellow"> line #2</span></p>
<p style="color:green"><span style="color:red">This is line #3</span>
<p style="color:yellow"><span style="color:yellow">This is</span><span style="color:red">line #4</span></span></p>

---

另外一些切线信息:

• 该文本在TinyMCE编辑器中.HTML需要符合这种模式,以使应用程序更加可用,并为PDF输出引擎提供可用的HTML(wkhtmltopdf如果HTMl过于复杂,嵌套跨度导致TinyMCE中的编辑不直观,则会出现行高问题)
• jQuery不可用.Prototype.JS可在父级中使用,window但不能直接在本文档中使用.我能够自己将jQuery代码重新格式化为纯JavaScript,但在这个实例中实际上不能使用jQuery:-(
• 是的,我有现有的代码.逻辑显然是如此可怕,以至于现在不值得分享.我正在努力改进它,并且如果我能够合理地接近它,它将分享它,这将是有用的
• 我真的知道我在做什么!我刚刚盯着这段代码太久了,所以正确使用的算法现在正在躲避我...

---

额外的,中途完成,我还在玩的非功能代码,以缓解downvotes:

function reformatChildNodes(node) {
    var n,l,parent;
    if(node.nodeName.toLowerCase() == 'p') {
        // We are on a root <p> node, make that it has at least one child span node:
        if(!node.childNodes.length) {
            var newSpan = document.createElement('span');
            /* set style on newSpan here */
            node.appendChild(newSpan);
        }
        if(node.childNodes[0].nodeName.toLowerCase() != 'span') {
            // First child of the <p> node is not a span, so wrap it in one:
            var newSpan = document.createElement('span');
            /* set style on newSpan here */
            newSpan.appendChild(node.childNodes[0]);
            node.appendChild(newSpan);
        }
        // Now repeat for each child node of the <p> and make sure they are all <span> nodes:
        for(n=0;n<node.childNodes.length;++n)
            reformatChildNodes(node.childNodes[n]);
    } else if(node.nodeName.toLowerCase() == 'span') {
        // We are on a <span> node, make that it has only a single #text node
        if(!node.childNodes.length) {
            // This span has no children! it should be removed...
        } else if(node.parentNode.nodeName.toLowerCase() != 'p') {
            // We have a <span> that's not a direct child of a <p>, so we need to reformat it:
            node.parentNode.parentNode.insertBefore(node, parent);
        } else {
            for(n=0;n<node.childNodes.length;++n)
                reformatChildNodes(node.childNodes[n]);
        }
    } else if(node.nodeName.toLowerCase() == 'div') {
        // This is justa  dirty hack for this example, my app calls reformatChildNodes on all nodes
        for(n=0;n<node.childNodes.length;++n)
            reformatChildNodes(node.childNodes[n]);
    }
}

Answer 1

此解决方案在跨度上运行,展开它们(必要时),然后继续使用刚刚打开的元素,以便处理所有这些元素.左侧只是具有文本节点子节点的顶级跨度.

function wrap(text, color) {
   var span = document.createElement("span");
   span.style.color = color;
   span.appendChild(text);
   return span;
}
function format(p) {
    for (var cur = p.firstChild; cur != null; cur = next) {
        var next = cur.nextSibling;
        if (cur.nodeType == 3) {
            // top-level text nodes are wrapped in spans
            next = p.insertBefore(wrap(cur, p.style.color), next);
        } else {
            if (cur.childNodes.length == 1 && cur.firstChild.nodeType == 3)
               continue;
            // top-level spans are unwrapped…
            while (cur.firstChild) {
                if (cur.firstChild.nodeType == 1)
                    // with nested spans becoming unnested
                    p.insertBefore(cur.firstChild, next);
                else
                    // and child text nodes becoming wrapped again
                    p.insertBefore(wrap(cur.firstChild, cur.style.color), next);
            }
            // now empty span is removed
            next = cur.nextSibling;
            p.removeChild(cur);
        }
    }
    p.style.color = p.firstChild.style.color;
}

(在jsfiddle.net上演示)