Select All Text In Element on Click (JavaScript OR jQuery)

To select all text inside an element such as DIV, we can simply use JavaScript document.createRange() method to create a range, and than using range.selectNodeContents() we can set node range (start and end), after which use selection.addRange() to select the range of the element.

JavaScript

This JavaScript code does its primary function which is to select all the text inside an element, but we don’t want to annoyingly select everything every-time the element is clicked. We only want user to be able to highlight the portion of the text within the element.

JS
1234567891011121314151617181920212223

function selectText(id){
	var sel, range;
	var el = document.getElementById(id); //get element id
	if (window.getSelection && document.createRange) { //Browser compatibility
	  sel = window.getSelection();
	  if(sel.toString() == ''){ //no text selection
		 window.setTimeout(function(){
			range = document.createRange(); //range object
			range.selectNodeContents(el); //sets Range
			sel.removeAllRanges(); //remove all ranges from selection
			sel.addRange(range);//add Range to a Selection.
		},1);
	  }
	}else if (document.selection) { //older ie
		sel = document.selection.createRange();
		if(sel.text == ''){ //no text selection
			range = document.body.createTextRange();//Creates TextRange object
			range.moveToElementText(el);//sets Range
			range.select(); //make selection.
		}
	}
}

Usage :
HTML
12345

<div onclick="selectText(this.id)" id="elementID">
//Text
</div>

jQuery

If you want to use it as jQuery code, just put the code inside jQuery “mouseup” event method, something like this:

JQUERY
1234567891011121314151617181920212223

$("#elementID").on('mouseup', function() {
	var sel, range;
	var el = $(this)[0];
	if (window.getSelection && document.createRange) { //Browser compatibility
	  sel = window.getSelection();
	  if(sel.toString() == ''){ //no text selection
		 window.setTimeout(function(){
			range = document.createRange(); //range object
			range.selectNodeContents(el); //sets Range
			sel.removeAllRanges(); //remove all ranges from selection
			sel.addRange(range);//add Range to a Selection.
		},1);
	  }
	}else if (document.selection) { //older ie
		sel = document.selection.createRange();
		if(sel.text == ''){ //no text selection
			range = document.body.createTextRange();//Creates TextRange object
			range.moveToElementText(el);//sets Range
			range.select(); //make selection.
		}
	}
});

Your HTML:

HTML
123
<textarea id="elementID">
//Some text here
</textarea>

Demo

Click box below the select all text inside the box.

  • 8 Comments

    Add Comment
    • Edi
      thanks a lot for the post
    • Shevy
      The original code works; the async () example from Anthony does not work, at the least not on semi-old firefox versions.
    • Anthony
      Hi, for my particular use case, I needed to select an element when another was hovered. With that code, I had issue with flickering because the guard to check if the selection was empty was executed before getSelection would complete. (At least in Chrome). I have made the following change to fix that in case it help someone:
      12345678910111213141516171819
      async function selectText(el){
      	var sel, range;
      	if (window.getSelection &amp;&amp; document.createRange) { //Browser compatibility
      	  sel = await window.getSelection();
      	  if(sel.toString() == &#039;&#039;){ //no text selection
      			range = document.createRange(); //range object
      			range.selectNodeContents(el); //sets Range
      			sel.removeAllRanges(); //remove all ranges from selection
      			sel.addRange(range);//add Range to a Selection.
      	  }
      	}else if (document.selection) { //older ie
      		sel = document.selection.createRange();
      		if(sel.text == &#039;&#039;){ //no text selection
      			range = document.body.createTextRange();//Creates TextRange object
      			range.moveToElementText(el);//sets Range
      			range.select(); //make selection.
      		}
      	}
      }
    • Redbro
      great..it's working..thank you a lot.
    • Meenakshi Agarwal
      Thanks a lot for this coding snippet. I'd to search a lot to find out a solution for a custom vs. all text selection inside a pre element. And finally, here I got that magic solution.
    • Stan
      Yup... me too... THUMBS UP. I was able to use this in my text editor... click once to engage editor on DIV of text, shift click to select all the text. Saved me a bunch of time. Thank you.
    • Bouh
      Oh Thanks , u saved me a lot of time
    • James
      Just a thumbs up since nobody else has done so. Works like a charm and saved me a lot of time trying to make this from scratch. Would copy and paste again, 10/10.