我需要使用jQuery根据用户的选择来分割HTML元素。在以下示例中,方括号表示所选内容:
为了做到这一点,我创建了一个范围,找到包含选择边界的TextNodes并使用
问题在于,
我也尝试过$(tail).nextAll(),但它似乎返回一个空集合。有人有想法如何实现这个吗?如果有任何不清楚的地方,请询问更多细节。
编辑:像建议的那样,我创建了以下链接http://jsfiddle.net/7PdLd/4/。
Lor[em <a>ips]um <span>dolor</span></a>
应该变成
Lor [ em <a>ips</a> ] <a>um <span>dolor</span></a>
为了做到这一点,我创建了一个范围,找到包含选择边界的TextNodes并使用
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/。