Select or Deselect Text Inside an Element Using JavaScript

It is pretty easy to select all text inside an <input> or a <textarea> by using select() method like so:

document.getElementById('exampleInput').select();

But how about selecting text inside elements other than <input> and <textarea>, such as <div>, <p>, and <pre>? Well, we can use the Selection API to select or deselect text inside these elements. For supporting old browsers that do not support Selection API, such as Internet Explorer 8 and below, we use fallbacks as shown in the functions below.

This function illustrates how to programmatically select all text inside any HTML element.

function selectText(element) {
  if (/INPUT|TEXTAREA/i.test(element.tagName)) {
    element.focus();
    if (element.setSelectionRange) {
      element.setSelectionRange(0, element.value.length);
    } else {
      element.select();
    }
    return;
  }
  
  var rangeObj, selection;
  if (document.createRange) { // IE 9+ and all other browsers
    rangeObj = document.createRange();
    rangeObj.selectNodeContents(element);
    selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(rangeObj);
  } else if (document.body.createTextRange) { // IE <=8
    rangeObj = document.body.createTextRange();
    rangeObj.moveToElementText(element);
    rangeObj.select();
  }
}

To deselect text inside an element, use the following function.

function deselect(element) {
  if (element && /INPUT|TEXTAREA/i.test(element.tagName)) {
    if ('selectionStart' in element) {
      element.selectionEnd = element.selectionStart;
    }
    element.blur();
  }

  if (window.getSelection) { // IE 9+ and all other browsers
    window.getSelection().removeAllRanges();
  } else if (document.selection) { // IE <=8
    document.selection.empty();
  }
}

Note: When calling the deselect function, its element parameter can be omitted if you know that the element is not an <input> or a <textarea>.

Demo

Click the 'Run Demo' button below to select text inside a <div> element and deselect automatically in 3 seconds.

Click the 'Run Demo' button below to select text inside a <textarea> and deselect it automatically in 3 seconds.