javascript - Rangy (JSjQuery) split node - Stack Overflow

admin管理员组

文章数量:1401592

How would I split a node/element at a position (selection).

Example I have this markup:

<p>This is <a href="">a te|st</a>, you like?</p>

(this pipe represents the position/selection)

I want to convert it to:

<p>This is <a href="">a te</a></p>|<p><a href="">st</a>, you like?</p>

Maintaining the selection.

Any ideas?

I and using the Rangy library, and also jQuery, but can use raw JS if applicable.

How would I split a node/element at a position (selection).

Example I have this markup:

<p>This is <a href="">a te|st</a>, you like?</p>

(this pipe represents the position/selection)

I want to convert it to:

<p>This is <a href="">a te</a></p>|<p><a href="">st</a>, you like?</p>

Maintaining the selection.

Any ideas?

I and using the Rangy library, and also jQuery, but can use raw JS if applicable.

• javascript
• jquery
• rangy

Share Improve this question Follow asked Jun 20, 2012 at 1:30 PetahPetah 46.1k3030 gold badges160160 silver badges215215 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

You could do this by creating a range that extends from the caret to the point immediately after the paragraph and using its extractContents() method.

Live demo: http://jsfiddle/timdown/rr9qs/2/

Code:

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

本文标签： javascriptRangy (JSjQuery) split nodeStack Overflow