javascript - JS - how to get the text between the beginning of the node and current caret (text cursor) position? -

i need text (or whole inner html) of node, truncated on current caret (text cursor) position in element contenteditable set true. i've tried using range.setstart() etc, can't make heads , tails of it...

edit: clarification, upon events want script extract text beginning of node has focus caret's position (where blinking vertcal line if editable field has focus) , store in variable. action similar happen if user pressed ctrl+shift+home , ctrl+c

example: given html:

<span contenteditable=true>hello, world<br> bye, world</span> 

and assuming caret between "good" , "bye", i'd retrieve

"hello, world<br> good"

you can using rangy , jquery.

here's jsfiddle demonstrating approach. comments explain happening.

$("contenteditable-element").click(function () {     // current selection rangy     var sel = rangy.getselection()     // insert temporary caret element @ caret position      // (which inside contenteditable element)     if (sel.rangecount) sel.getrangeat(0).insertnode($("<caret />")[0]);     // read html inside contenteditable element     var innerhtml = $("contenteditable-element").html();     // clean up, rid of caret element     $("caret").remove();     // keep text before first occurrence of caret element     innerhtml = innerhtml.substr(0, innerhtml.indexof('<caret>')); });