selection position of selected text of div using javascript

I need to get the position of the selected text within a content non-editable div (not a textarea, not a rtf editor, just a simple div)

I want to do this in order to enable users to select pieces of an article and "highlight it", by wrapping it in a span with a different background and, of course, an article is build with divs and/or p-s etc, not textareas or rtfs

Any ideas?

P.s. You can also use jQuery :D

P.s.s. I need the position of the se开发者_运维问答lection, not the selection itself. Aka: it start from index I to index J. I need this because the normal method of finding the text in the parent does not always return a unique result, which would suck :)

---

If you just want to change the background of the selected text, the easiest way to do this is by using document.execCommand(). See my answer here: Change CSS of selected text using Javascript

---

//Wrap selected text in span tags with the class 'hl'
//Take some action after (in this case, a simple alert)
$("p").live("mouseup",
    function() {
        selection = getSelectedText(); 
        if(selection.length >= 3) {
            $(this).html($(this).html().replace(selection, $('<\/span>').attr({'class':'hl'}).html(selection).parent().html()) );
            alert(selection);
        }       
    }
); 

//Grab selected text
function getSelectedText(){ 
    if(window.getSelection){ 
        return window.getSelection().toString(); 
    } 
    else if(document.getSelection){ 
        return document.getSelection(); 
    } 
    else if(document.selection){ 

        return document.selection.createRange().text; 
    } 
} 

Code comes from here: http://esbueno.noahstokes.com/post/92274686/highlight-selected-text-with-jquery

---

You can check if text is selected by running :

window.getSelection and document.getSelection() and  document.selection 

(because browsers can check this i different ways) and then search for div containing this text .  

---

For getting the position of the selection, try these links:

http://bytes.com/topic/javascript/answers/153164-return-selectionstart-div

Set cursor position on contentEditable <div>

---

Well, even though you found a solution to the problem stated in your 2nd paragraph, i don't think the answer to your main question has been given. :)

The object Selection has a property named anchorOffset, giving exactly what you asked for (the position of the selected text within an element). The above link will tell you about which browsers support it, i'm afraid IE <9 might not.

function show_selected()
{
    var sel = selection();
    console.log(sel.anchorOffset + ':' + sel);
}

Now if you bind show_selected to, say, mouseup, you will see the offset and the selected text printed on the js console.

The fonction selection may be the following, supposed to be cross-browser:

function selection()
{
    var sel;
    if(window.getSelection){
      sel = window.getSelection()
    }
    else if(document.getSelection){
      sel = document.getSelection()
    }
    else if(document.selection){
      sel = document.selection.createRange()
    }
    return sel
}