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

range
A Range object that will be added to the Selection.

Example

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
HTML Editing APIs
The definition of 'Selection.addRange()' in that specification.
Editor's Draft Initial definition
Selection API
The definition of 'Selection.addRange()' in that specification.
Working Draft Current

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic support
Experimental
Chrome Full support 1Edge Full support YesFirefox Full support YesIE ? Opera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS ? Samsung Internet Android ?

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

Document Tags and Contributors

Last updated by: mfluehr,