24

what is the best way to do this in jQuery? This should be a fairly common use case.

  1. User selects text in a textarea
  2. He clicks on a link
  3. The text in the link replaces the selected text in the textarea

Any code will be much appreciated - I am having some issues with part 3.

1
  • 1
    The properties selectionStart and selectionEnd of your textarea or input is all you need nowadays. Combine that with the slice method on the input element's value.
    – caw
    Feb 9, 2017 at 1:46

1 Answer 1

33

Here's how you can do it, in all major browsers. I've also got a jQuery plug-in that includes this functionality. With that, the code would be

$("your_textarea_id").replaceSelectedText("NEW TEXT");

Here's a full stand-alone solution:

function getInputSelection(el) {
    var start = 0, end = 0, normalizedValue, range,
        textInputRange, len, endRange;

    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
        start = el.selectionStart;
        end = el.selectionEnd;
    } else {
        range = document.selection.createRange();

        if (range && range.parentElement() == el) {
            len = el.value.length;
            normalizedValue = el.value.replace(/\r\n/g, "\n");

            // Create a working TextRange that lives only in the input
            textInputRange = el.createTextRange();
            textInputRange.moveToBookmark(range.getBookmark());

            // Check if the start and end of the selection are at the very end
            // of the input, since moveStart/moveEnd doesn't return what we want
            // in those cases
            endRange = el.createTextRange();
            endRange.collapse(false);

            if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
                start = end = len;
            } else {
                start = -textInputRange.moveStart("character", -len);
                start += normalizedValue.slice(0, start).split("\n").length - 1;

                if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
                    end = len;
                } else {
                    end = -textInputRange.moveEnd("character", -len);
                    end += normalizedValue.slice(0, end).split("\n").length - 1;
                }
            }
        }
    }

    return {
        start: start,
        end: end
    };
}

function replaceSelectedText(el, text) {
    var sel = getInputSelection(el), val = el.value;
    el.value = val.slice(0, sel.start) + text + val.slice(sel.end);
}

var el = document.getElementById("your_textarea");
replaceSelectedText(el, "[NEW TEXT]");
9
  • This will be an amazingly useful plugin. Thank you so much! It is kinda weird how this use case is not covered yet. I tried writing my own, but hit on so many browser quirks. ;)
    – meow
    Oct 19, 2010 at 14:54
  • replaceSelectedText - the only issue i see with this is that in IE, when nothing is selected, the cursor goes to the front, as opposed to the end. anyway that can be fixed?
    – meow
    Oct 19, 2010 at 22:21
  • In the code posted here or the jQuery plugin? The code here makes no attempt to reposition the selection afterwards, for the sake of brevity. The jQuery plugin should deal with that.
    – Tim Down
    Oct 19, 2010 at 23:31
  • @TimDown thats a great bit of code, but why the heck is this not in the jquery libs already. I'm with Ming, I would have thought this was a fairly common use case.
    – Ads
    Nov 19, 2013 at 3:07
  • 1
    @Ads: They like to keep the core lean. I can understand that.
    – Tim Down
    Nov 19, 2013 at 9:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.