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

回答

相關問題