6

ある位置でノード/要素を分割するにはどうすればよいですか（選択）。

例私はこのマークアップを持っています：

<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を使用できます。

4

1 に答える 1

10

これを行うには、キャレットから段落の直後のポイントまでの範囲を作成し、そのextractContents()メソッドを使用します。

ライブデモ： http： //jsfiddle.net/timdown/rr9qs/2/

コード：

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);
    }
}
于 2012-06-20T09:57:14.883 に答える