javascript - 如何使用 jQuery 将所有带有 的文本节点包装在一个 div 中，该 div 还可能包含其他 标签和 标签？

Question

我有下面的例子 html:

<div>
Wrap this text with p which also includes <strong>this</strong> and also <a href="">this</a>.
<h1>Heading 1</h1>
<p>Some other text</p>
Wrap this text with p which also includes <strong>this</strong> and also <a href="">this</a>.
</div>

使用 jQuery 的期望结果:

<div>
<p>Wrap this text with p which also includes <strong>this</strong> and also <a href="">this</a>.</p>
<h1>Heading 1</h1>
<p>Some other text</p>
<p>Wrap this text with p which also includes <strong>this</strong> and also <a href="">this</a>.</p>
</div>

Answer 1

我认为您可以遍历 div 的内容并创建一组要包装的项目，如下所示

var $group = $();

$('div').contents().each(function () {
    if (this.nodeType == 3 || !$(this).is(':header, div, p')) {
        if (this.nodeType != 3 || this.nodeValue.trim()) {
            $group = $group.add(this);
        }
    } else {
        $group.wrapAll('<p />')
        $group = $()
    }
});
$group.wrapAll('<p />')

演示:Fiddle