Question

我有一个带有嵌套标题，段落等的HTML块。

是否存在可以取消它们的jQuery / JavaScript插件/函数/ snipet？或者我将如何进行此操作？

我可以提供不应嵌套的标签列表。

例如我有

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

应分别转换为

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

的更新 的

我注意到，当HTML附加到DOM时，Firefox和Chrome至少会进行一些自动更正。（因为我在字符串中有HTML，但如果需要可以将它附加到DOM）

唯一不做的就是从标题中删除p个标签。

Answer 1

大多数浏览器会将DOM更正为有效。

所以我现在看到浏览器确实做了一些修正，这是好的，但我唯一注意到它没有做的，就是移动p的标题。

此代码会将p元素移到其标题元素之后。

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

jsFiddle

Answer 2

我最终使用了这个：

html = $('<' + tag + '>' + html + '</' + tag + '>');
html.find('p').wrapInner('<' + tag + '/>');
html.find('p > *').unwrap();
html = $('<div/>').html(html).html();

但这不是我问题的确切答案，因为有点难以解释我真正想做的事情。

使用jQuery或JavaScript标准化嵌套块

2 个答案: