使用javascript选择div文本的选择位置

Question

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 ps etc, not textareas or rtfs

Any ideas?

Ps You can also use jQuery :D

Pss I need the position of the selection, 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 :)

Answer 1

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

Answer 2

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

Answer 3

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
}

Answer 4

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 .

Answer 5

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>