Question

我有通过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>

我已经做了很多搜索和思考，但没有发现任何合理的事情。

Answer 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

jquery - 合并堆叠的DOM元素

1 个答案: