No Login Data Private Local Save

Selection & Range API Demo - Online Get/Set Selection

Developer Tools Educational API demo Range Selection
38
0
0
0
Editable Content Area

Welcome to the Selection & Range API Demo! This is an interactive playground where you can explore how the Selection and Range APIs work in the browser.

Try selecting some text with your mouse or keyboard. You can also click this link to see how anchor and focus behave. The contenteditable area allows you to modify text and observe how the DOM structure changes.

"The Selection API represents the user's selection, while the Range API provides granular control over document fragments."

Here is a bold red text and some inline code for variety. You can also find highlighted spans within the content.

  • Select across different element types
  • Observe anchor vs focus positions
  • Test Range manipulation methods
Click to place cursor, drag to select, or use keyboard (Shift+Arrow) Chars: 0
Live Selection Status
Type: None
Collapsed: —
Range Count: 0
Selected Text: —
Detailed Info
Click "Get Details" or select text to see full info...
Quick Actions
Set Selection (Programmatic)

Use presets or define a custom range to programmatically set the selection.

Range Operations

These operations modify the content. Use with care.

FAQ – Selection & Range API

The Selection API represents the user's current text selection (or cursor position) in the browser. It is accessed via window.getSelection() and reflects what the user sees highlighted on screen. The Range API, on the other hand, represents a contiguous fragment of a document—defined by a start and end boundary. A Selection can contain multiple Ranges (though in practice, most browsers support only one). Use Selection for reading user intent and Range for precise DOM manipulation.

Anchor is the point where the user started the selection. Focus is the point where the user ended (released the mouse or finished dragging). If the user selects from left to right, anchor comes before focus. If from right to left, focus comes before anchor. When the selection is collapsed (just a cursor), anchor and focus are at the same position.

Use window.getSelection().toString() to get the plain text of the current selection. For more detailed information, access the Range via window.getSelection().getRangeAt(0) to inspect start/end containers, offsets, and bounding rectangles.

A collapsed selection means the start and end points are identical—there is no text highlighted, just a blinking cursor (caret). You can check selection.isCollapsed or range.collapsed to determine this. Collapsed ranges are useful for inserting content at a specific point.

Create a Range, set its boundaries using range.setStart(node, offset) and range.setEnd(node, offset), then apply it to the Selection: const sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range);. The node can be a text node (offsets are character positions) or an element node (offsets are child node indices).

deleteContents() removes the selected content from the DOM permanently. extractContents() also removes it but returns a DocumentFragment that you can re-insert elsewhere—useful for cut/paste or drag-and-drop functionalities. Both methods collapse the range after execution.

Listen to the document.onselectionchange event (or use document.addEventListener('selectionchange', callback)). This event fires whenever the Selection object changes. Inside the handler, check window.getSelection() to get updated details. Note: this event can fire very frequently—debounce if needed.

Yes, both APIs are well-supported across all modern browsers (Chrome, Firefox, Safari, Edge). However, Firefox historically supports multiple ranges per selection (via selection.addRange() without removing existing ones), while Chromium-based browsers always replace. For consistent behavior, always call selection.removeAllRanges() before adding a new range.
🔧 Related Tools