JavaScript Document getSelection() Method

What You’ll Learn

document.getSelection() is an instance method that returns the document’s Selection object — the text the user highlighted, or the caret position (see MDN Document: getSelection()). Learn how to read selected text, work with ranges, and how selection differs from focus.

Introduction

When a visitor highlights words on a page — or places the caret in editable text — the browser tracks that as a selection. document.getSelection() is how JavaScript reads it.

MDN: the method returns the Selection object associated with this document, representing the range of text selected by the user, or the current position of the caret.

Related tutorials: getElementsByTagNameNS(), getElementById(), hasFocus().

Understanding document.getSelection()

An instance method on the Document interface (MDN). It takes no arguments and returns the current selection state for that document.

• No parameters — call it with empty parentheses (MDN).
• Return value — a Selection object, or null without a browsing context (MDN).
• Selected text — use selection.toString() for a string (MDN).
• Ranges — selection.getRangeAt(0) for the first range (MDN example).
• Window alias — Window.getSelection() is identical to window.document.getSelection() (MDN).
• Input caveat — MDN: currently getSelection() doesn’t work on the content of <input> elements in Firefox; HTMLInputElement.setSelectionRange() can help.

📝 Syntax

General form of Document.getSelection (MDN):

getSelection()

Parameters

None (MDN).

Return value

A Selection object, or null if the document has no browsing context — for example, it is the document of an <iframe> that is not attached to a document (MDN).

MDN quick sample

const selection = document.getSelection();
const selRange = selection.getRangeAt(0);
// do stuff with the range
console.log(selection); // Selection object

let selectedText = selection.toString();

⚖️ Selection vs focus vs Window.getSelection

Examples Gallery

Examples follow MDN Document: getSelection() and practical beginner patterns.

const selection = document.getSelection();
console.log(selection); // Selection object
console.log(selection && selection.type);

Selection { ... }
Range
(or Caret / None depending on state)

const selection = document.getSelection();
const selectedText = selection ? selection.toString() : "";
console.log(selectedText);

// alert(selection) may auto-call toString() (MDN)
// but prefer the explicit form above

Hello World
(whatever text you highlighted)

const selection = document.getSelection();
if (selection && selection.rangeCount > 0) {
  const selRange = selection.getRangeAt(0);
  console.log(selRange.startContainer.nodeName);
  console.log(selRange.toString());
}

#text
selected words here

const selection = document.getSelection();
if (!selection || selection.isCollapsed) {
  console.log("No text highlighted (caret only or empty)");
} else {
  console.log("Highlighted:", selection.toString());
}

No text highlighted (caret only or empty)
— or —
Highlighted: some words

const selection = document.getSelection();
const focused = document.activeElement;

console.log("selected text:", selection ? selection.toString() : "");
console.log("focused tag:", focused && focused.tagName);

selected text: (maybe empty)
focused tag: BUTTON

🚀 Common Use Cases

• Copy helpers — read the highlighted string for a custom copy button.
• Annotate / quote — capture selected text for notes or sharing.
• Editor tools — wrap the current range in bold/italic markup.
• Word count — measure only the highlighted portion of an article.
• Focus-aware UI — combine with activeElement when needed (MDN).
• Input fields in Firefox — MDN: prefer setSelectionRange for <input> selection quirks.

📝 Notes

• MDN: Baseline Widely available since November 2017.
• MDN: may return null when the document has no browsing context.
• MDN: Window.getSelection() is identical to window.document.getSelection().
• MDN: call toString() explicitly when you need the selected text as a string.
• MDN: selection ≠ focus; use activeElement for the focused element.
• Related: getElementsByTagNameNS(), getElementById(), hasFocus().

💡 Best Practices