रंगी (जेएस/jQuery) विभाजित नोड

Question

मैं स्थिति (चयन) पर एक नोड/तत्व कैसे विभाजित करूं।

<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> 

चयन को बनाए रखने

उदाहरण मैं इस मार्कअप है।

कोई विचार?

मैं और रंगी लाइब्रेरी का उपयोग करके, और jQuery भी, लेकिन लागू होने पर कच्चे जेएस का उपयोग कर सकते हैं।

Answer 1

आप पैराग्राफ के तुरंत बाद कैरेट से बिंदु तक और 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); 
    } 
}