jquery - 合并堆叠的 DOM 元素答案

【问题标题】：jquery - consolidate stacked DOM elementsjquery - 合并堆叠的 DOM 元素
【发布时间】：2012-02-14 03:34:44
【问题描述】：

我有通过 contenteditable div 格式化的 HTML。我想让它更简洁、现代的 HTML。我可以轻松替换任何 b、strong、em、font 等标签并将它们替换为 span，但结果会产生“堆叠”元素。

例如，我可能有：

<span style="font-weight:bold">
    <span style="text-decoration:underline">some text</span>
</span>

我想看看：

<span style="font-weight:bold; text-decoration:underline">some text</span>

困难的部分是它需要处理：

<span style="font-weight:bold">
    <span style="text-decoration:underline">some text</span> not underlined
</span>

我已经做了很多搜索和思考，但没有找到任何合理的东西。

【问题讨论】：

您希望在 javascript 中即时执行此操作？
@JamesMontagne 是的。用户在“contenteditable=true”div 中输入文本，我想在发送之前对其进行清理。我不想保持 div 的 HTML 干净，只需要在用户完成后执行，这是我已经捕获的事件。
@jopke - 我有一个类似的要求，即在提交按钮上清理 contenteditable div。为了简化事情，我将 useCSS 设置为 false，清理 html 汤（查看解决方案 3：stackoverflow.com/questions/16226671/…），然后使用正则表达式快速将 b/span/s/u/i/em 标签转换为适当的 CSS相当于请注意，Solution3 将对所有节点的格式进行排序（因此您可以将格式重新排序为您希望通过正则表达式处理的方式）。

标签： javascript jquery dom contenteditable

【解决方案1】：

好吧，这是一个开始。显然，您的选择器将比 span 更具体。

$("span").each(function(){
    var $this = $(this);
    var $contents = $(this).contents();

    if($contents.length === 1 && $contents.is("span")){
        // only one child (including text nodes) and it is a span, combine
        copyStylesFromParentToChild();  // need to implement this

        $this.replaceWith($this.children());  // replace the parent with the child
    }
});

这里唯一棘手的部分是copyStylesFromParentToChild。我不知道有任何简单直接的方法可以将所有样式从一个元素复制到另一个元素。你可以试试JavaScript & copy style

【讨论】：