Position of selection in javascript

Question

I am trying to find the position of the selected text in a div. I prompt the user to select a substring of the text in a div and then submit it. I need the index of the start point and end point and have not been successful using the strategy below. Any help would be much appreciated.

This is the function I have and it is not working:

if (typeof window.getSelection != 'undefined') {                                                                                                                                                                                                                            
var sel = window.getSelection();                                                                                                                                                                                                                                          
var range = sel.getRangeAt(0);                                                                                                                                                                                                                                               
var preCaretRange = range.cloneRange();                                                                                                                                                                                                                               
startOffset = preCaretRange.toString().length;                                                                                                                                                                                                                        
endOffset = startOffset + range.toString().length;
}

The div is called "myarea". Thanks

Which line "isn't working"? Is your `if` condition true? Does any line throw an error? Are you getting back numeric values for your range, but they're different than expected (e.g., `-1`, `0`)? — apsillers, Jul 02 '13 at 14:19
Possibly related and helpful: http://stackoverflow.com/questions/5669448/get-selected-texts-html-in-div — David, Jul 02 '13 at 14:26

Raj Nathani · Accepted Answer · 2013-07-02T17:01:05.343

5

You almost got it right!
Its the startOffset which is causing it not to work.
Currently it is:

var startOffset = preCaretRange.toString().length;

The value on the RHS which is preCaretRange.toString().length is going to return you the total length of the string which has been selected, and not the start position. To get the start position you would use the startOffset property stored by the range. Therefore:

var startOffset = preCaretRange.startOffset;

A note on optimization: you do not need to clone range into preCaretRange..

document.body.addEventListener('mouseup', function () {
    if (typeof window.getSelection != 'undefined') {
        var sel = window.getSelection();
        var range = sel.getRangeAt(0);

        var startOffset = range.startOffset;
        var endOffset = startOffset + range.toString().length - 1;

        console.log("Selection starts at: " + startOffset);
        console.log("Selection ends at: " + endOffset);
    }
}, false);

Here is a fiddle which demonstrates it working with an actual text selection: http://jsfiddle.net/Dp3qp/3/

edited Jul 02 '13 at 17:01

answered Jul 02 '13 at 15:21

Raj Nathani

2,805
1
20
19

This works for the startoffset but not for the end offset.. it gives a larger index than the actual index. – user1011332 Jul 02 '13 at 16:10
1

so it works for the first selection, but not the following selections. – user1011332 Jul 02 '13 at 16:46
if you are looking for an inclusive end range then `endOffset` will simply have to be changed to `endOffset - 1` – Raj Nathani Jul 02 '13 at 16:55
i tested it with multiple selections and it seemed to be okay, can you please elaborate more on your test input? – Raj Nathani Jul 02 '13 at 16:58
Sure, so I am using it to select the text in the div "myarea" then click a button to record the selection, then select again. The selection for the first time always works, however.. the following selections are always incorrect. – user1011332 Jul 02 '13 at 17:01
ok so you want a button which can be clicked on to reveal the selection, i made another fiddle here replicating that: http://jsfiddle.net/gjKXH/ let me know if this is what you need – Raj Nathani Jul 02 '13 at 17:07
thank you for your help. I already have the button that reveals the selection. Your method works great if I am making 1 selection. However my interface involves selecting and clicking a button, and selecting again and clicking a button. It does not give the correct index the second time. Here is the website http://54.244.121.67/index.php – user1011332 Jul 02 '13 at 19:10
It was a browser issue. I had a plug-in that was splitting the content in my divs. This totally worked. Thanks!!! – user1011332 Jul 02 '13 at 21:05

Position of selection in javascript

1 Answers1

Linked