Skip to main content

How to Clear a User's Text Selection in JavaScript

In interactive web applications, you sometimes need to programmatically clear a user's text selection (the highlighted text). This is a great user experience feature, for example, to deselect text immediately after it has been copied to the clipboard, providing clear visual feedback that the action is complete.

This guide will teach you the modern, standard method for clearing text selection using the window.getSelection() API.

The Core Tool: window.getSelection()​

The window.getSelection() method is the standard way to interact with the user's current text selection. It returns a Selection object, which represents the range(s) of text that the user has highlighted.

This Selection object is our entry point for both reading and manipulating the user's selection.

The Solution: removeAllRanges()​

The Selection object has a method called removeAllRanges() that does exactly what its name implies: it removes all the selected ranges, effectively clearing any text selection on the page.

The logic:

  1. Get the current Selection object using window.getSelection().
  2. Call the .removeAllRanges() method on it.

Solution:

function clearSelection() {
  if (window.getSelection) {
    window.getSelection().removeAllRanges();
  }
}

// You can call this function from an event handler.
// For example, from a button click:
// myButton.addEventListener('click', clearSelection);
note

A Note on Robustness: It's a good practice to check if window.getSelection exists before calling it. While it is supported in all modern browsers, this ensures your code won't break in very old or non-standard environments.

Related Task: Getting the Selected Text​

Before you clear the selection, you often want to get the selected text first. You can do this by calling the .toString() method on the Selection object.

Solution:

function getSelectedText() {
  const selection = window.getSelection();
  return selection ? selection.toString() : '';
}

const highlightedText = getSelectedText();
console.log('User has selected:', highlightedText);

Practical Example: A "Copy and Clear" Button​

This is a perfect real-world use case. We will create a button that copies the user's currently highlighted text to the clipboard and then immediately clears the selection to provide visual feedback that the action is complete.

<p>Select some of this text and then click the button.</p>
<button id="copy-btn">Copy Selected Text</button>

Solution: this script uses the modern, asynchronous Clipboard API (navigator.clipboard) to handle the copy action.

const copyButton = document.getElementById('copy-btn');

copyButton.addEventListener('click', async () => {
  const selection = window.getSelection();
  const selectedText = selection.toString();

  if (selectedText) {
    try {
      // Use the Clipboard API to copy the text
      await navigator.clipboard.writeText(selectedText);
      console.log('✅ Text copied to clipboard!');
      
      // Clear the selection to provide visual feedback
      selection.removeAllRanges();
    } catch (err) {
      console.error('Failed to copy text: ', err);
    }
  } else {
    console.log('No text selected to copy.');
  }
});
note

This pattern creates a seamless and intuitive user experience.

Conclusion​

Clearing the user's text selection is a simple but effective way to improve the user experience of your web application.

  • The definitive method is to use window.getSelection().removeAllRanges().
  • This is often used in combination with window.getSelection().toString() to first get the selected text before clearing it.
  • This technique is perfect for providing visual feedback after an action (like a copy-to-clipboard button) has been completed.

Table of Contents