Replacing text inside textarea without focus

Question

I want to replace selected text(or insert new text after cursor position if nothing is selected). The new text is entered from another textbox.
I want to be able to in

Answer 1

A jquery plugin to get selection index start and end in text area. The above javascript codes didnt work for IE7 and IE8 and gave very inconsistent results, so I have written this small jquery plugin. Allows to temporarily save start and end index of the selection and hightlight the selection at a later time.

A working example and brief version is here: http://jsfiddle.net/hYuzk/3/

A more details version with comments etc. is here: http://jsfiddle.net/hYuzk/4/

        // Cross browser plugins to set or get selection/caret position in textarea, input fields etc for IE7,IE8,IE9, FF, Chrome, Safari etc
        $.fn.extend({
            // Gets or sets a selection or caret position in textarea, input field etc.
            // Usage Example: select text from index 2 to 5 --> $('#myTextArea').caretSelection({start: 2, end: 5});
            //                get selected text or caret position --> $('#myTextArea').caretSelection();
            //                if start and end positions are the same, caret position will be set instead o fmaking a selection
            caretSelection : function(options)
            {
            if(options && !isNaN(options.start) && !isNaN(options.end))
            {
                this.setCaretSelection(options);
            }
            else
            {
                return this.getCaretSelection();
            }
            },
            setCaretSelection : function(options)
            {
            var inp = this[0];
            if(inp.createTextRange)
            {
                var selRange = inp.createTextRange();
                selRange.collapse(true);
                selRange.moveStart('character', options.start);
                selRange.moveEnd('character',options.end - options.start);
                selRange.select();
            }
            else if(inp.setSelectionRange)
            {
                inp.focus();
                inp.setSelectionRange(options.start, options.end);
            }
            },
            getCaretSelection: function()
            {
            var inp = this[0], start = 0, end = 0;
            if(!isNaN(inp.selectionStart))
            {
                start = inp.selectionStart;
                end = inp.selectionEnd;
            }
            else if( inp.createTextRange )
            {
                var inpTxtLen = inp.value.length, jqueryTxtLen = this.val().length;
                var inpRange = inp.createTextRange(), collapsedRange = inp.createTextRange();

                inpRange.moveToBookmark(document.selection.createRange().getBookmark());
                collapsedRange.collapse(false);

                start = inpRange.compareEndPoints('StartToEnd', collapsedRange) > -1 ? jqueryTxtLen : inpRange.moveStart('character', -inpTxtLen);
                end = inpRange.compareEndPoints('EndToEnd', collapsedRange) > -1 ? jqueryTxtLen : inpRange.moveEnd('character', -inpTxtLen);
            }
            return {start: Math.abs(start), end: Math.abs(end)};

            },
            // Usage: $('#txtArea').replaceCaretSelection({start: startIndex, end: endIndex, text: 'text to replace with', insPos: 'before|after|select'})
            // Options     start: start index of the text to be replaced
            //               end: end index of the text to be replaced
            //              text: text to replace the selection with
            //            insPos: indicates whether to place the caret 'before' or 'after' the replacement text, 'select' will select the replacement text

            replaceCaretSelection: function(options)
            {
            var pos = this.caretSelection();
            this.val( this.val().substring(0,pos.start) + options.text + this.val().substring(pos.end) );
            if(options.insPos == 'before')
            {
                this.caretSelection({start: pos.start, end: pos.start});
            }
            else if( options.insPos == 'after' )
            {
                this.caretSelection({start: pos.start + options.text.length, end: pos.start + options.text.length});
            }
            else if( options.insPos == 'select' )
            {
                this.caretSelection({start: pos.start, end: pos.start + options.text.length});
            }
            }
        });