How can I get the selected text in a textarea?

Question

I'm trying to make my own WYSIWYG editor. Is there a way to get the text which has the user selected in a textarea?

For example, if the user selects some word and then clicks button, how do I find out which text was selected?

I'm using jQuery.

Answer 1

window.getSelection().toString() worked for me with Chrome, but not Firefox.

For obtaining the selected content in a <textarea> with Firefox:

function getSel() // JavaScript
{
    // Obtain the object reference for the <textarea>
    var txtarea = document.getElementById("mytextarea");

    // Obtain the index of the first selected character
    var start = txtarea.selectionStart;

    // Obtain the index of the last selected character
    var finish = txtarea.selectionEnd;

    // Obtain the selected text
    var sel = txtarea.value.substring(start, finish);


    // Do something with the selected content
}

You could also use activeElement instead of getElementById.

Reference:

• textarea
• document

Answer 2

Handling selection is different for different browsers:

var userSelection;
if (window.getSelection) {
    userSelection = window.getSelection();
}
else if (document.selection) { // Opera
    userSelection = document.selection.createRange();
}

That gives you a range object. Each range represents a single selection (using control/command key it's possible to make multiple active selections).

The type of range object you have now depends on what browser. For IE it's a Text Range object; for others its a Selection object. To convert a Selection object into a text range, you can call getRangeAt; for Safari, you need to build that:

var range;
if (userSelection.getRangeAt)
    range = userSelection.getRangeAt(0);
else { // Safari
    range = document.createRange();
    range.setStart(userSelection .anchorNode, userSelection.anchorOffset);
    range.setEnd(userSelection.focusNode, userSelection.focusOffset);
}

The range object provides you with the starting and ending dom elements and text offset of the selection.

More information about range objects can be found at quirksmode.org here

If you are using jQuery, you may want to look at the light weight jQuery RTE Plugin by Batiste Bieler. It may do enough for your needs or at least give you something to start with.

Answer 3

getSelection()

This varies a bit by browser. See here for a function that alleges to work in most: http://snipplr.com/view/775/getselection/

Answer 4

A small function that will get the selected string/text of a textarea or an input element:

function getInputSelection(elem){
  if(typeof elem != "undefined"){
    s = elem[0].selectionStart;
    e = elem[0].selectionEnd;
    return elem.val().substring(s, e);
  }
  else{
    return '';
  }
}

Note that the above code needs jQuery for working. An example of getting the selected string of an input element with id abc123 is:

getInputSelection($("#abc123"));

The above function will return the selected string. If there isn’t any string that is selected by the user, it will return null.

More Examples

getInputSelection($("body").find("input[name=user]"));

On elements selected with class name, the selected string of the first element of the array of elements is returned and not the selected string of all the elements. After all, selection in a page will always be 1.

Answer 5

Try the jquery-fieldselection plugin.

You can download it from here. There is an example too.

Answer 6

function getSel() {
    var input = $("#text");
    return input.html().toString().substring(getSelection().baseOffset, getSelection().extendOffset);
}