Question

I have a block of HTML with nested headings, paragraphs etc.

Is there a jQuery/JavaScript plugin/function/snipet that can unnest them?, or how would I go about doing it?

I can supply a list of tags that should not be nested.

For example I have

<h1>
    Heading 1
    <h2>
        Heading 2
        <h3>
            Heading 3
        </h3>
    </h2>
</h1>

<p>
    Paragraph
    <p>
        Paragraph
    </p>
    <p>
        Paragraph
    </p>
</p>

<p>
    Paragraph
    <h1>
        Heading 1
        <h6>
            Heading 6
        </h6>
        Heading 1
    </h1>
    Paragraph
<p>

Which should respectively be converted to

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>

<p>Paragraph<p>
<h1>Heading 1</h1>
<h6>Heading 6</h6>
<h1>Heading 1</h1>
<p>Paragraph<p>

Update:

I have noticed the Firefox and Chrome at least does some automatic correction when the HTML is appended to the DOM. (as I have the HTML in a string, but can append it to he DOM if needed)

The only thing it does not do is remove p tags out of headings.

Answer 1

Most browsers will correct the DOM to be valid.

So I see now that the browser does do some correction, which is good but the only thing I notice it does not do, is move p‘s out of headings.

This code will move p elements to after their heading element.

$('p').filter(function() {
    return $(this).closest(':header').length;
}).each(function() {
    $(this).insertAfter($(this).closest(':header'));
});

jsFiddle.