Jquery - Consolidate Stacked Dom Elements

I have HTML that was formatted via a contenteditable div. I am wanting to make it more concise, modern HTML. I can easily replace any b, strong, em, font, etc tags and replace them

Solution 1:

Well, here's a start. Obviously your selector would be more specific than just 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
    }
});

The only tricky part here is copyStylesFromParentToChild. I don't know any easy straightforward way to copy all styles from one element to another. You can try JavaScript & copy style