32

In JavaScript, there are various methods for accessing the user’s text selection, and creating text selections (or ranges) — see http://www.quirksmode.org/dom/range_intro.html.

As per that page, you can programmatically create a range, and access the text within that. But doing this doesn’t change the user’s text selection, or make the user have some selected text if they don’t already.

Can you set and/or change the user’s text selection in JavaScript?

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270

2 Answers2

41

Yes. In all browsers you can get one or more Ranges or a TextRange from the user's selection, and both Range and TextRange have methods for changing the contents of the range.

UPDATE

You can set the user's selection by creating a Range and adding it to the Selection object in most browsers and by creating a TextRange and calling its select() method in IE <= 8.

For example, to set the selection to encompass the contents of an element:

function selectElementContents(el) {
    if (window.getSelection && document.createRange) {
        var sel = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(el);
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (document.selection && document.body.createTextRange) {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.select();
    }
}

There are also several methods of the Selection object that can be used to change the user's selection in non-IE browsers. If you can be more specific about how you want to change the selection then it will be easier to help.

Tim Down
  • 318,141
  • 75
  • 454
  • 536
  • 1
    Ah yes, sorry, I didn’t phrase the question very well — I’m actually looking to set the user’s text selection when they don’t have one already. – Paul D. Waite Nov 15 '10 at 10:40
  • is it possible to select different ranges simultaneously. I want to be able to select multiple parts of text that are discontinuous. – Techsin Nov 14 '13 at 17:48
  • 1
    @Techsin: Yes, but only in Firefox. Call `addRange()` for each range you want to select. – Tim Down Nov 14 '13 at 17:50
  • @TimDown: It would be very helpful, if you could add also non-IE method here. – Timo Kähkönen May 03 '14 at 20:50
  • Note that `range.selectNodeContents(el);` might result in an unexpected value for `range.endOffset`/`selection.focusOffset` if `el` is not a pure text element. E.g. passing a `span` will most likely result in `endOffset=1` while passing *the span's `text` child* will result in the correct offset. See [this SO answer](https://stackoverflow.com/a/39812995/2098939) for more information. – Gerrit-K Dec 11 '18 at 16:53
  • @Griddo: It's only unexpected if you're not aware that a range offset can be relative to an element rather than just being restricted to a text node. Also, it's not the case that you should restrict selection offsets to just text nodes (think of non-text-containing elements such as `
    ` and `
    `).     – Tim Down Dec 12 '18 at 12:27
  • @TimDown You're absolutely right. It was just meant as a side note for someone who might be facing the same problem and (regarding the text nodes) as an example to illustrate my confusion, but not at all as a general suggestion or rule of thumb. To me, it was very un-intuitive, that `selectNodeContents` on `Hello World!` will visually select "Hello World!" but have an endOffset of 1 instead of 12. Once you familiarize yourself with the concepts of nodes, selections and ranges, it totally makes sense. – Gerrit-K Dec 12 '18 at 15:19
9

Update 2021

The Selection API does this. Rather than making a new Selection() (which seemed intuitive, but doesn't work), window.getSelection() always returns a Selection object - even if nothing is highlighted by the user! You can then use setBaseAndExtent() to make a particular node be highlighted - this will change whatever is selected by the user (even if nothing is selected) to match what you specify.

The example below highlights the question in this StackOverflow page

const selection = window.getSelection()
const headerElement = document.querySelector('#question-header a')
selection.setBaseAndExtent(headerElement,0,headerElement,1)
mikemaccana
  • 110,530
  • 99
  • 389
  • 494
  • [Browser support](https://caniuse.com/selection-api) looks pretty good, although `window.getSelection` doesn't work if you still need to support IE 8. – Paul D. Waite Jan 26 '21 at 11:28
  • 2
    Also it's 2021 bro. – Paul D. Waite Jan 26 '21 at 11:29
  • 2
    @PaulD.Waite Speaking of 2021 - IE8? – mikemaccana Jan 26 '21 at 11:29
  • I bet *someone's* still using it. – Paul D. Waite Jan 26 '21 at 11:34
  • This is fine unless you need to support any version of IE, including 11. The only relevant thing that has changed since my answer in 2010 is wider browser support for `setBaseAndExtent()`, which started out as WebKit-only, but it was never implemented in IE. The more roundabout way in my answer of creating a range and selecting it works in IE >= 9. – Tim Down Jan 29 '21 at 11:28
  • Sure but the amount of people that support IE11 in 2021 is obviously fairly small. This answer is short, uses a simpler technique, and has links to MDN for the actual spec. – mikemaccana Jan 29 '21 at 12:04
  • `window.getSelection` might actually return null according to typescript – Charlie Martin Apr 29 '21 at 19:18