Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/401.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Rangy(JS/jQuery)拆分节点_Javascript_Jquery_Rangy - Fatal编程技术网

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);
    }
}