Replacing selected text in the textarea

Question

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.

Answer 1

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]");