使用 jQuery 拆分包含 TextNode 和元素的元素答案

【问题标题】：Split an element containing TextNodes and elements using jQuery使用 jQuery 拆分包含 TextNode 和元素的元素
【发布时间】：2014-06-03 14:45:40
【问题描述】：

我需要使用 jQuery 根据用户选择来拆分 HTML 元素。在以下示例中，方括号表示选择：

Lor[em <a>ips]um <span>dolor</span></a>

应该变成

Lor [ em <a>ips</a> ] <a>um <span>dolor</span></a>

为此，我创建了一个范围，找到包含选择边界的 TextNode 并使用 splitText(index) 拆分它们。接下来我检查父元素是否也必须拆分。如果是，我克隆并清空它们，将原始元素的第二部分移动到克隆中，并将它们插入到原始元素之后，如下所示：

var tail = textNode.splitText( offset );
var $parent = $(textNode).parent();

if ($parent.is("span")) {
    var $tail = $parent.clone();
    $tail.contents().remove();
    $tail = $tail.append(tail).insertAfter($parent);

    if ($parent.parent().is("a")) {
        $tail = $parent.parent().clone();
        $tail.contents().remove();
        $tail = $tail.append($tail).insertAfter($parent.parent());
    }

    return $tail[0];
}
else if ($parent.is("a")) {
    var $tail = $parent.clone();
    $tail.contents().remove();
    $tail = $tail.append(tail).insertAfter($parent);

    return $tail[0];
}
return tail;

但问题是，tail 仅包含 TextNode 的第二部分。以下<span /> 没有移动，因此 HTML 像这样乱七八糟（选择正在丢失，但不重要）：

Lor em <a>ips <span>dolor</span></a> <a>um</a>

我也试过 $(tail).nextAll() 但它似乎返回一个空集。有人知道我如何实现这一目标吗？如果有什么不清楚的地方，请询问更多细节。

编辑：就像建议的那样，我创建了以下http://jsfiddle.net/7PdLd/4/。

【问题讨论】：

你能发jsfiddle 看更清楚吗？
@Genzotto 好主意，我这样做了：jsfiddle.net/7PdLd/4

标签： javascript jquery html selection contenteditable

【解决方案1】：

这似乎有效：

Demo

function start () {
    var range = window.getSelection().getRangeAt(0);
    split(
        range.startContainer,
        range.startOffset,
        range.commonAncestorContainer,
        false
    );
    split(
        range.endContainer,
        range.endOffset,
        range.commonAncestorContainer,
        true
    );  
}
function split(node, offset, ancestor, backwards) {
    var clone;
    if(backwards) {
        clone = node;
        node = node.splitText(offset);
    }else{
        clone = node.splitText(offset);
    }
    if(node == ancestor) return;
    var parent;
    while((parent = node.parentNode) && parent != ancestor) {
        var parentClone = parent.cloneNode(false);
        appendUntil(parentClone, parent, node, !backwards);
        parentClone.insertBefore(clone, backwards ? null : parentClone.firstChild);
        node = parent;
        clone = parentClone;
    }
    insertAdjacent(ancestor, clone, node, backwards);
}
function appendUntil(target, parent, until, fromEnd) {
    var from, to, sibling;
    if(fromEnd) {
        from = until.nextSibling;
        to = null;
    } else {
        from = parent.firstChild;
        to = until;
    }
    while(from && from != to) {
        sibling = from.nextSibling;
        target.appendChild(from);
        from = sibling;
    }
}
function insertAdjacent(parent, newEl, refEl, before) {
    parent.insertBefore(newEl, before ? refEl : refEl.nextSibling);
}

【讨论】：