jquery - 整合堆叠的DOM元素

我有通过contenteditable div格式化的HTML。我想使它更简洁，现代的HTML。我可以轻松地替换任何b，strong，em，font等标签并将其替换为跨度，但结果会产生“堆叠”元素。jquery - 整合堆叠的DOM元素

举例来说，我可能有：

<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>

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

来源

2012-02-14 jopke

你正在寻找这样的动态在JavaScript？ – 2012-02-14 03:37:39

@JamesMontagne是的。用户将文本输入到“contenteditable = true”div中，并且我想在发送之前清理它。我不打算保持div的HTML干净，只需要在用户完成时完成，这是我已经捕获的事件。 – jopke 2012-02-14 03:41:27

@jopke - 我有一个类似的要求，其中contenteditable div是提交按钮清理。为了简化，我将useCSS设置为false，清理html汤（看看解决方案3：http://stackoverflow.com/questions/16226671/consolidate-stacked-dom-formatting-elements-contenteditable-div）和然后使用正则表达式快速将b/span/s/u/i/em标签转换为适当的CSS equiv。请注意，Solution3将命令所有节点的格式（因此您可以通过正则表达式将格式重新排列为想要的处理方式）。 – 2013-04-29 16:48:52

嗯，这是一个开始。很明显，你的选择器会比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

来源

2012-02-14 20:21:20

这看起来像一个合理的方法。我会尽快给它... – jopke 2012-02-16 05:29:47

jquery - 整合堆叠的DOM元素

回答

相关问题