Javascript Rangy(JS/jQuery)拆分节点
如何在某个位置(选择)拆分节点/元素 例如,我有这样的标记:Javascript Rangy(JS/jQuery)拆分节点,javascript,jquery,rangy,Javascript,Jquery,Rangy,如何在某个位置(选择)拆分节点/元素 例如,我有这样的标记: <p>This is <a href="">a te|st</a>, you like?</p> 这是,你喜欢吗 (此管道表示位置/选择) 我想将其转换为: <p>This is <a href="">a te</a></p>|<p><a href="">st</a>, you like?</p
<p>This is <a href="">a te|st</a>, you like?</p>
这是,你喜欢吗
(此管道表示位置/选择)
我想将其转换为:
<p>This is <a href="">a te</a></p>|<p><a href="">st</a>, you like?</p>
这是,你喜欢吗
维护选择
有什么想法吗
我可以使用Rangy库,也可以使用jQuery,但如果适用,可以使用原始JS 您可以通过创建一个从插入符号延伸到段落后面的点的范围并使用其方法来实现这一点 现场演示: 代码:
var sel = rangy.getSelection();
if (sel.rangeCount > 0) {
// Create a copy of the selection range to work with
var range = sel.getRangeAt(0).cloneRange();
// Get the containing paragraph
var p = range.commonAncestorContainer;
while (p && (p.nodeType != 1 || p.tagName != "P") ) {
p = p.parentNode;
}
if (p) {
// Place the end of the range after the paragraph
range.setEndAfter(p);
// Extract the contents of the paragraph after the caret into a fragment
var contentAfterRangeStart = range.extractContents();
// Collapse the range immediately after the paragraph
range.collapseAfter(p);
// Insert the content
range.insertNode(contentAfterRangeStart);
// Move the caret to the insertion point
range.collapseAfter(p);
sel.setSingleRange(range);
}
}