jQuery: माउस-क्लिक स्थिति पर टेक्स्ट विभाजित करें

Question

मैं केवल प्रशिक्षण के लिए टेक्स्टरेरा की तरह कुछ प्रोग्राम करने की कोशिश कर रहा हूं।

मैं इसमें साथ (उपयोगकर्ता जनित) पाठ एक div है:

<div id="editor">Hello! I am a Text!</div> 

अगर मैं दोनों में से "हैलो" "L", उदाहरण के लिए के बीच (बाएं mousebutton के साथ) पर क्लिक करें, मैं था इसे देखने के लिए:

<div id="editor">Hel<div id="cursor">|</div>lo! I am a Text!</div> 

मैं इसे कैसे प्राप्त करूं? अब तक, मैं इसे कर रहा हूं ...

//HTML 
<div id="editor" onclick="setCursorWithMouse()"><!-- User-Text --></div> 

//jQuery 
function setCursorWithMouse(){ 
    $('#editor').append('<div id="cursor">|</div>'); 
} 

... लेकिन, ज़ाहिर है, यह सिर्फ div के अंत में कर्सर जोड़ता है।

मुझे कैसे पता चलेगा कि उपयोगकर्ता ने वास्तव में कहां क्लिक किया था, जहां मेरा कर्सर (या जो भी) जोड़ने के लिए, टेक्स्ट को विभाजित करना है?

धन्यवाद

संपादित करें:

• मैं contenteditable का उपयोग नहीं करना चाहते हैं! बस इसे इस तरह देखो: मैं माउस-क्लिक स्थिति पर एक स्ट्रिंग को विभाजित करना चाहता हूं।

• मुझे पता है .append() वह नहीं है जो मैं ढूंढ रहा हूं! .append() बाद में, बेहतर, फ़ंक्शन के लिए प्लेसहोल्डर था। यह काम मैं अभी पूछ रहा हूँ।

• मैं एक निश्चित चौड़ाई फ़ॉन्ट का उपयोग करता हूं।

Answer 1

इस मैं मिल सकता है के रूप में के रूप में करीब है: DEMO

var clicked=false; 
$('#editor').click(function(e){ 
    $(this).addClass('active'); 
    var letterWidth=7; 
    $('#editor span').remove(); 
    var clickPos=e.pageX-$(this).offset().left; 
    if(!clicked) clickPos+letterWidth; 
    var letter=Math.round(clickPos/letterWidth); 
    var before=$(this).html().substr(0,letter); 
    var after=$(this).html().substr(letter,$(this).html().length); 
    $(this).html(before+'<span>|</span>'+after); 
    clicked=true; 
}); 
$(document).click(function(e){ 
    if(!$('#editor').is(e.target)){ 
     $('#editor').removeClass('active'); 
     $('#editor span').remove(); 
     clicked=false; 
    } 
}); 

मुझे आशा है कि यह काफी करीब है! :)

नोट:

इस कोड को यह सोचते हैं कि font-size16px है लिखा है!

मुझे डर है कि आपको आगे विस्तार के लिए font-size की गणना करना होगा।

Answer 2

नोट, अपेक्षित परिणाम फ़ायरफ़ॉक्स पर वापस नहीं आते हैं; क्रोम अपेक्षित परिणाम देता है, हालांकि माउस धीरे-धीरे जारी नहीं होने पर, 1 वर्ण से बाएं या दाएं स्थानांतरित हो सकता है।

$(function() { 
 
    $(document).data("text", $("#editor").text()) 
 
    .on("mousedown", function() { 
 
     $("#editor") 
 
     .html($(this) 
 
      .data("text")) 
 
    }) 
 
    .on("mouseup", function() { 
 
     that = $("#editor"); 
 
     var sel = window.getSelection ? window.getSelection() : document.selection(); 
 
     var o = that.text(); 
 
     var before = sel.baseOffset; 
 
     var after = o.length - before; 
 
     var a = o.slice(0, before); 
 
     var b = after === 0 ? "" : o.slice(-after); 
 
     var n = "<data>|</data>"; 
 
     var html = (after === "" ? a + n : a + n + b); 
 
     that.html(html); 
 
    }); 
 
})

#editor { 
 
    font-family: Sans; 
 
    font-size: 28px; 
 
    letter-spacing: 8px; 
 
    white-space: pre; 
 
} 
 
#editor > data { 
 
    color: red; 
 
    max-width: .1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div tabindex="0" id="editor">Hello! I am a Text!</div>

jsfiddle http://jsfiddle.net/guest271314/maakff7q/