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
– Shinning River, Commented Jul 16, 2013 at 11:25
@AndyG: Wrong way round. document.createRange() is the standard, supported by everything except IE <= 8. — Tim Down
– Tim Down, Commented Jul 16, 2013 at 13:52
Thank you @TimDown. I was looking at selection.createRange. — Andy G
– Andy G, Commented Jul 16, 2013 at 14:06

Tim Down · Accepted Answer · 2013-07-16 13:59:22Z

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, 2013 at 13:59

Tim Down

326k76 gold badges461 silver badges546 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shinning River Over a year ago

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.

Tim Down Over a year ago

@ShinningRiver: Then you'll need a more complicated solution, like stackoverflow.com/a/13950376/96100

Charlie · Accepted Answer · 2015-05-04 19:40:24Z

20

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);

answered May 4, 2015 at 19:40

Charlie

9,2132 gold badges61 silver badges56 bronze badges

Collectives™ on Stack Overflow

Set selection by range in Javascript

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related