Jason Jason - 18 days ago 4
jQuery Question

Selecting text in an element (akin to highlighting with your mouse)

I would like to have users click a link, then it selects the HTML text in another element (not an input).

By "select" I mean the same way you would select text by dragging your mouse over it. This has been a bear to research because everyone talks about "select" or "highlight" in other terms.

Is this possible? My code so far:

HTML:

<a href="javascript:" onclick="SelectText('xhtml-code')">Select Code</a>
<code id="xhtml-code">Some Code here </code>


JS:

function SelectText(element) {
$("#" + element).select();
}


Am I missing something blatantly obvious?

Answer

I have found a solution for this, thanks to this thread found by TheVillageIdiot. I was able to modify the info given and mix it with a bit of jQuery to create a totally awesome function to select the text in any element, regardless of browser:

function SelectText(element) {
    var text = document.getElementById(element);
    if ($.browser.msie) {
        var range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if ($.browser.mozilla || $.browser.opera) {
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    } else if ($.browser.safari) {
        var selection = window.getSelection();
        selection.setBaseAndExtent(text, 0, text, 1);
    }
}

EDIT (9/28/11):

It's been a while since this answer was updated, and I've learned a lot as a developer since I asked and answered this question. It has also gotten a lot more attention than I thought it would. I want to provide a better solution than the original one I posted, one that doesn't rely on deprecated jQuery methods, or jQuery at all, for that matter. Could you use jQuery to help you out? Sure, but if you can achieve the same result without jQuery and using feature detection instead of browser sniffing, why wouldn't you? So below is my updated answer:

function SelectText(element) {
    var doc = document
        , text = doc.getElementById(element)
        , range, selection
    ;    
    if (doc.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        selection = window.getSelection();        
        range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

document.onclick = function(e) {    
    if (e.target.className === 'click') {
        SelectText('selectme');
    }
};
<div id="selectme"><p>Some text goes here!</p><p>Moar text!</p></div>
<p class="click">Click me!</p>

Here is an updated working demo. For those of you looking for a jQuery plugin, I made one of those too (updated again).

UPDATED (1/10/2012) Per Tim Down's suggestion, setBaseAndExtent() is not needed for webkit.

UPDATED (9/19/2014) Embedded code snippet