मैं इस शब्द को कैसे प्राप्त कर सकता हूं कि एक संतोषजनक div के अंदर कैरेट चालू है?

Question

मैं माउस पर क्लिक होने पर स्थिति में संपादन योग्य div से एक शब्द निकालने का प्रयास कर रहा हूं। उदाहरण के लिए:

Lorem ipsum dolor sit amet, cons|ectetur adipiscing elit. Cras vestibulum gravida 
tincidunt. Proin justo dolor, iaculis vulputate eleifend et, facilisis eu erat.* 

का उपयोग करना | कैरेट का प्रतिनिधित्व करने के लिए, फ़ंक्शन को "consectetur" वापस करना चाहिए।

मेरे प्रयास:

window.onload = function() { 
     document.getElementById("text-editor").onclick = function() { 
      var caretPos = 0, containerEl = null, sel, range; 
      if (window.getSelection) { 
       sel = window.getSelection(); 
       if (sel.rangeCount) { 
        range = sel.getRangeAt(0); 
        if (range.commonAncestorContainer.parentNode == this) { 
         caretPos = range.endOffset; 
        } 
       } 
      } else if (document.selection && document.selection.createRange) { 
       range = document.selection.createRange(); 
       if (range.parentElement() == this) { 
        var tempEl = document.createElement("span"); 
        this.insertBefore(tempEl, this.firstChild); 
        var tempRange = range.duplicate(); 
        tempRange.moveToElementText(tempEl); 
        tempRange.setEndPoint("EndToEnd", range); 
        caretPos = tempRange.text.length; 
       } 
      } 
      var prevSpace, nextSpace, text = this.innerText; 

      prevSpace = text.substring(0,caretPos).lastIndexOf(" "); 
      nextSpace = text.indexOf(" ", caretPos + 1); 
      nextSpace == -1 ? nextSpace = text.length - 1 : false; 
      prevSpace++; 
      console.log([prevSpace,caretPos,nextSpace].join("|")); 
      var word = text.substring(prevSpace, nextSpace); 
      //Removes punctuation and whitespace. 
      var patt = new RegExp("([A-Za-z0-9']*)","g"); 
      word = patt.exec(word)[0]; 
      document.getElementById("current-word").innerHTML = word; 
     }; 
    }; 

एक समारोह contenteditable div, जो कैरट स्थिति की गणना करता है और उसके बाद के लिए माउस क्लिक करें घटना के लिए बाध्य है पूर्ववर्ती और निम्नलिखित अंतरिक्ष पात्रों में से अनुक्रमित (या शुरुआत पाता है या स्ट्रिंग का अंत पूरी तरह से) और शब्द निर्धारित करने के लिए सबस्ट्रिंग का उपयोग करता है। विराम चिह्न और सफेद जगह को हटाने के लिए एक त्वरित रेगेक्स मैच है और हम अंततः सही शब्द के साथ समाप्त होते हैं।

यह ठीक काम करता था, जब संतोषजनक div के अंदर एक पाठ नोड था, लेकिन जैसे ही मैंने ड्रॉप करना और अन्य मिश्रित टैग शुरू किया, कैरेट की स्थिति की गणना करने वाली विधि का हिस्सा काम करना बंद कर दिया, हमेशा इसकी गणना करना 0. क्या एचटीएमएल में कैरेट की स्थिति की गणना करने का कोई तरीका है जैसे पाठ के साथ?

यदि नहीं, तो क्या कोई वैकल्पिक विधि सुझा सकता है?

Answer 1

इसके लिए आप मेरी रंगी लाइब्रेरी के नए TextRange module का उपयोग कर सकते हैं, हालांकि यह केवल एक सुविधा के लिए भारी ओवरकिल है। कोड यह आप आवश्यकता होगी:

var sel = rangy.getSelection(); 
sel.expand("word"); 
var word = sel.text(); 
alert(word); 

अन्यथा, यदि आप पहले से Blink ओपेरा के लिए कोई समर्थन के साथ रह सकते हैं और Firefox < 4 (करने के लिए और संस्करण 12 सहित), तो आप इस्तेमाल कर सकते हैं Selection.modify() (वेबकिट, फायरफॉक्स) और expand()TextRange (आईई) की विधि। यहां एक उदाहरण दिया गया है।

डेमो: http://jsfiddle.net/timdown/dBgHn/1/

कोड:

function getWord() { 
    var sel, word = ""; 
    if (window.getSelection && (sel = window.getSelection()).modify) { 
     var selectedRange = sel.getRangeAt(0); 
     sel.collapseToStart(); 
     sel.modify("move", "backward", "word"); 
     sel.modify("extend", "forward", "word"); 

     word = sel.toString(); 

     // Restore selection 
     sel.removeAllRanges(); 
     sel.addRange(selectedRange); 
    } else if ((sel = document.selection) && sel.type != "Control") { 
     var range = sel.createRange(); 
     range.collapse(true); 
     range.expand("word"); 
     word = range.text; 
    } 
    alert(word); 
} 

Answer 2

BitBucket उनके Cursores.js पुस्तकालय करता है, यह छोटे है कि जारी किया है और ध्यान केंद्रित जो अच्छा है है - http://cursores.bitbucket.org/

केवल मुद्दा मैं यह है कि यदि देखभाल के बाईं ओर कोई पाठ नहीं है, तो यह टोकन नहीं उठाता है, उदाहरण के लिए "टी | एस्ट" काम करेगा लेकिन "| test" नहीं होगा।