Clear Text Selection with JavaScript

Clear Text Selection with JavaScript

Simple question which I can’t find the answer to: how can I use JavaScript (or jQuery) to deselect any text which may be selected on a webpage? E.G. user clicks and drags to highlight a bit of text — I want to have a function deselectAll() which clears this selection. How should I go about writing it?
Thanks for the help.


Solution 1:

if (window.getSelection) {
  if (window.getSelection().empty) {  // Chrome
  } else if (window.getSelection().removeAllRanges) {  // Firefox
} else if (document.selection) {  // IE?

Credit to Mr. Y.

Solution 2:

Best to test the features you want directly:

var sel = window.getSelection ? window.getSelection() : document.selection;
if (sel) {
    if (sel.removeAllRanges) {
    } else if (sel.empty) {

Solution 3:

State of De-selection Affairs 2014

I did some research of my own. Here’s the function I wrote and am using these days:

(function deselect(){
  var selection = ('getSelection' in window)
    ? window.getSelection()
    : ('selection' in document)
      ? document.selection
      : null;
  if ('removeAllRanges' in selection) selection.removeAllRanges();
  else if ('empty' in selection) selection.empty();

Basically, getSelection().removeAllRanges() is currently supported by all modern browsers (including IE9+). This is clearly the correct method moving forward.

Compatibility issues accounted for:

  • Old versions of Chrome and Safari used getSelection().empty()
  • IE8 and below used document.selection.empty()


It’s probably a good idea to wrap up this selection functionality for re-use.

function ScSelection(){
  var sel=this;
  var selection = sel.selection = 
    'getSelection' in window
      ? window.getSelection()
      : 'selection' in document
        ? document.selection
        : null;
  sel.deselect = function(){
    if ('removeAllRanges' in selection) selection.removeAllRanges();
    else if ('empty' in selection) selection.empty();
    return sel; // chainable :)
  sel.getParentElement = function(){
    if ('anchorNode' in selection) return selection.anchorNode.parentElement;
    else return selection.createRange().parentElement();

// use it
var sel = new ScSelection;
var $parentSection = $(sel.getParentElement()).closest('section');

I’ve made this a community wiki so that you people can add functionality to this, or update things as the standards evolve.

Solution 4:

Here’s the accepted answer, but in two lines of code:

var selection = window.getSelection ? window.getSelection() : document.selection ? document.selection : null;
if(!!selection) selection.empty ? selection.empty() : selection.removeAllRanges();

The only check I don’t do is for the existence of removeAllRanges – but AFAIK there is no browser that has either window.getSelection or document.selection but doesn’t have either a .empty or .removeAllRanges for that property.

Solution 5:

window.getSelection() lets you access the selected text, from there, there’s a few things you can do to manipulate it..

Read More: Developer Mozilla DOM Selection