在jQuery中将HTML兄弟直接合并为一个

Question

我需要将直接的html兄弟姐妹合并到一个包含文本节点的页面代码中.

<div>some text 
<b>some text</b> som
e text <b>text</b><b> more text</b> some te
xt</div>

这是使用rangy和jQuery编辑代码后的实际输出,我需要在编辑后清除它,所以它看起来像这样:

<div>some text <b>some text</b> some text <b>text more text</b> some text</div>

我想用jQuery来做这件事.我知道函数unwrap()和wrapAll()但我无法有效地组合它们.感谢您的任何线索或帮助!

Answer 1

需要一一迭代子节点；将节点与前一个节点进行比较，并在必要时进行合并。它可以像你想要的那样复杂；但这是一个开始：

$("div").each(function (i) {
    $(this).find("*").each(function () {
        var that = this.previousSibling;
        if (that && that.nodeType === Node.ELEMENT_NODE && that.tagName === this.tagName) {
            var node = document.createElement(this.tagName);
            while (that.firstChild) {
                node.appendChild(that.firstChild);
            }
            while (this.firstChild) {
                node.appendChild(this.firstChild);
            }
            this.parentNode.insertBefore(node, this.nextSibling);
            that.parentNode.removeChild(that);
            this.parentNode.removeChild(this);
        }
    });
});

演示在这里