How to select the text of a span on click?

Question

I am looking for a way to select the text inside a span using jquery when the text is clicked on.

For example in the html snippet below, I want the text "\apples\oranges\pears" to become selected when it is clicked on.

<p>Fruit <span class="unc_path">\\apples\oranges\pears</span></p> 

I've tried implementing this myself to no avail.

Answer 1

It could be implemented with native JavaScript. A working demonstration on jsFiddle. Your code could be like this:

$('.unc_path').click(function (){     var range, selection;      if (window.getSelection && document.createRange) {         selection = window.getSelection();         range = document.createRange();         range.selectNodeContents(this);         selection.removeAllRanges();         selection.addRange(range);     } else if (document.selection && document.body.createTextRange) {         range = document.body.createTextRange();         range.moveToElementText(this);         range.select();     } });