Can you set and/or change the user’s text selection in JavaScript?
Yes. In all browsers you can get one or more Range
s 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.
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)