jQuery retrieve the selected text

Question

i apply this method to a <textarea></textarea> element but i would like to return the html/text selected by the user.

$('.wysiwyg textarea').live('select',function(text){
    console.log(text);
});

How can i do that using this method?

Check this question too - http://stackoverflow.com/questions/717224/how-to-get-selected-text-in-textarea — Hari Pachuveetil, Oct 04 '11 at 23:06

score 3 · Answer 1 · answered Oct 04 '11 at 22:56

Found some useful code here:

http://mark.koli.ch/2009/09/use-javascript-and-jquery-to-get-user-selected-text.html

function getSelected(){
  var t = '';
  if(window.getSelection){
    t = window.getSelection();
  }else if(document.getSelection){
    t = document.getSelection();
  }else if(document.selection){
    t = document.selection.createRange().text;
  }
  return t.toString();
}

So you can do:

$('.wysiwyg textarea').live('select',function(){
    var text=getSelected();
    console.log(text);
});

As seen here:

http://jsfiddle.net/2SjRx/

isJustMe · Accepted Answer · 2011-10-05T04:08:09.437

2

You can use this :

    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);
    }
}

and finally bind the function accordingly

This should be enough to get you started http://jsfiddle.net/TXQmC/11/ its kinda late here so i only made the complete binding for firefox since is the one u using.

edited Oct 05 '11 at 04:08

answered Oct 04 '11 at 22:40

isJustMe

5,452
2
31
47

i tryed binding your code as shown $('.wysiwyg textarea').live('select',function(){ console.log(SelectText(this)); }); – itsme Oct 05 '11 at 00:56
but returns error : Parameter is not an object [Interrompi per questo errore] range.selectNodeContents(text); – itsme Oct 05 '11 at 00:56
checked man, it should be perfect, just is not really "live" , if you select once is ok, when you select the second time it returns always the first selected text, doesn't renew i mean (live) ... :P – itsme Oct 05 '11 at 14:05
this code is an old copy and paste of the original, unupdated version of [this answer](http://stackoverflow.com/questions/985272/jquery-selecting-text-in-an-element-akin-to-highlighting-with-your-mouse) check there for a new and much improved answer :) – Jason Aug 12 '13 at 16:33

score 1 · Answer 3 · answered Apr 16 '12 at 19:22

I didn't want to get the empty strings returned from some browsers, so I spent a few hours and updated the selection function. Tested to work with IE, Chrome, Firefox, Safari, Opera. Really wish jQuery had this built in so I wouldn't have to mess with it.

function getSelected() {
    var text = "";
    if (window.getSelection
    && window.getSelection().toString()
    && $(window.getSelection()).attr('type') != "Caret") {
        text = window.getSelection();
        return text;
    }
    else if (document.getSelection
    && document.getSelection().toString()
    && $(document.getSelection()).attr('type') != "Caret") {
        text = document.getSelection();
        return text;
    }
    else {
        var selection = document.selection && document.selection.createRange();

        if (!(typeof selection === "undefined")
        && selection.text
        && selection.text.toString()) {
            text = selection.text;
            return text;
        }
    }

    return false;
}

jQuery retrieve the selected text

3 Answers3