I have the following code which selects the entire contents of an element:

function selectElement(element) {
    var sel = window.getSelection();
    sel.removeAllRanges();
    var range = document.createRange();
    range.setStart(element, 0);
    range.setEnd(element, 1);
    sel.addRange(range);
    console.log(range);
}

Which I call through:

selectElement(document.getElementById("input"));

If #input looks like this:

<div id="input">
Lorem Ipsum Dolor Sit
</div>

How can I select characters 0-7, so that the selection would be:

<div id="input">
[Lorem I]psum Dolor Sit
</div>

I figured setting the setStart and setEnd would work, but I can only set it from 0-1.

Can I select the text inside the node, instead of the node itself?

I have the following code which selects the entire contents of an element:

function selectElement(element) {
    var sel = window.getSelection();
    sel.removeAllRanges();
    var range = document.createRange();
    range.setStart(element, 0);
    range.setEnd(element, 1);
    sel.addRange(range);
    console.log(range);
}

Which I call through:

selectElement(document.getElementById("input"));

If #input looks like this:

<div id="input">
Lorem Ipsum Dolor Sit
</div>

How can I select characters 0-7, so that the selection would be:

<div id="input">
[Lorem I]psum Dolor Sit
</div>

I figured setting the setStart and setEnd would work, but I can only set it from 0-1.

Can I select the text inside the node, instead of the node itself?

• javascript

• Can you just use your function to select entire HTML. Then use regex to parse the string you want. – geniuscarrier Commented Mar 1, 2013 at 18:09
• No, I need to actually select the text in the browser via window.getSelection().setRange() – Charlie Commented Mar 1, 2013 at 18:10

3 Answers 3

You're passing the whole div node to setStart/setEnd, that's why you can only select between 0 and 1. You have to pass the div's firstChild instead, which is a text node. For example, to select "Ipsum":

range.setStart(element.firstChild, 7);
range.setEnd(element.firstChild, 12);

http://jsfiddle/JJ86n/

Note: dealing with ranges cross-browser has always been a mess. It's been a while since I don't deal with it, but last time I checked it seemed a good idea to let a library like rangy take care of the nasty details.

You need to select it from the text node inside the element.

range.setStart(element.childNodes[0], 0);
range.setEnd(element.childNodes[0], 7);

You are dealing with the whole element which is an Object having different objects as properties. To deal with the Strings you must have to get the String(text) sub element first. You can do this by getting getting the child node from the array of elements child nodes. attempting to use a JavaScript String property or method such as length or substr directly on a Selection object will result in an error if it does not have that property or method and may return unexpected results if it does.