JQuery - объединение элементов DOM

У меня есть HTML, который был отформатирован с помощью contenteditable div. Я хочу сделать его более сжатым, современным HTML. Я могу легко заменить любые теги b, strong, em, font и т.д. И заменить их на промежутки, но результат создал "сложены" элементы.

Например, у меня может быть:

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

Я довольно много искал и думал об этом, но не нашел ничего разумного.

Ответы

Ответ 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 и стиль копирования