jquery - объединяет сложенные элементы DOM

Question

У меня есть HTML, который был отформатирован через contenteditable div. Я хочу сделать это более кратким, современным 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 и стиль копирования