Set selection by range in Javascript

Question

I want to select text by sending location/anchorOffset and length/offset using Javascript Here is my code

  var node = document.getElementById("content");
   var range = document.createRange();
   range.setStart(node, 0);
   range.setEnd(node, 4); // here 0 and 4 is my location and length for the selection
       // if my string is "This is test string" in my case its must select "This" 
   var selection = window.getSelection();
   selection.removeAllRanges();
    selection.addRange(range);

But the issue is with range.setStart and range.setEnd its not working as I expect

@AndyG I am using it in my IOS app.Remaining function are working okay but the issue is only with setStart and setEnd both are not working — Shinning River, Jul 16 '13 at 11:25
@AndyG: Wrong way round. `document.createRange()` is the standard, supported by everything except IE <= 8. — Tim Down, Jul 16 '13 at 13:52
Thank you @TimDown. I was looking at `selection.createRange`. — Andy G, Jul 16 '13 at 14:06

score 23 · Accepted Answer · answered Jul 16 '13 at 13:59

23

The setStart() and setEnd() methods of DOM Range are well specified, so you could find the answer by reading the spec or MDN.

To summarise, if you want to specify a range boundary in terms of character offsets, you need to deal with a text node rather than an element. If your element contains a single text node, changing the first line of your code to the following will work:

var node = document.getElementById("content").firstChild;

answered Jul 16 '13 at 13:59

Tim Down

318,141
75
454
536

1

Great It working in the case if I have only one text line in the "content". What about if I have applied bold or font tag on the string. – Shinning River Jul 17 '13 at 08:02
1

@ShinningRiver: Then you'll need a more complicated solution, like http://stackoverflow.com/a/13950376/96100 – Tim Down Jul 17 '13 at 08:15

score 19 · Answer 2 · answered May 04 '15 at 19:40

Here's a good solution if you're trying to select a jquery result set

var $newSelection = $('.someElements');
var selection = window.getSelection();
var range = document.createRange();
range.setStartBefore($newSelection.first()[0]);
range.setEndAfter($newSelection.last()[0]);
selection.removeAllRanges();
selection.addRange(range);

Set selection by range in Javascript

2 Answers2