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

Question

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?

Answer 1

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.

Answer 2

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)