This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The Selection.addRange()
method adds a Range
to a Selection
.
Syntax
selection.addRange(range);
Parameters
Example
Currently only Firefox supports multiple selection ranges, other browsers will not add new ranges to the selection if it already contains one.
HTML
<p>I <strong>insist</strong> that you <strong>try</strong> selecting the <strong>strong words</strong>.</p> <button>Select strong words</button>
JavaScript
let button = document.querySelector('button'); button.addEventListener('click', function () { let selection = window.getSelection(); let strongs = document.getElementsByTagName('strong'); if (selection.rangeCount > 0) { selection.removeAllRanges(); } for (let i = 0; i < strongs.length; i++) { let range = document.createRange(); range.selectNode(strongs[i]); selection.addRange(range); } });
Result
Specifications
Specification | Status | Comment |
---|---|---|
Selection API The definition of 'Selection.addRange()' in that specification. |
Working Draft | Current |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
addRange | Chrome Full support 1 | Edge Full support 12 | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
See also
Selection
, the interface this method belongs to