Reemplazar selección

Modificar el contenido de una caja de texto (<textarea> o <input type="text">) no es tan trivial como parece ya que normalmente querremos preservar el contenido existente y dejar el cursor donde estaba. Esta función intenta emular el comportamiento típico de un editor de texto:

Inserta el nuevo texto en la posición del cursor.
Reemplaza el texto seleccionado, si lo hubiera.
Deja el cursor justo al final del texto insertado.

Debería funcionar al menos en Firefox, Chrome, Opera e Internet Explorer.

/**

 * Inserta un texto en un control de formulario en la posición del cursor;

 * reemplaza la selección si la hubiera

 *

 * control: nodo <textarea> o <input type="text">

 * texto: texto que se desea insertar

 */

function reemplazarSeleccion(control, texto){ // v2011-12-21

    var inicio, seleccion;

    if("selectionStart" in control){ // W3C

        // Guardamos la posición inicial del cursor

        inicio = control.selectionStart;

        // Reemplazamos todo el contenido

        control.value = control.value.substr(0, control.selectionStart) +

            texto + control.value.substr(control.selectionEnd, control.value.length);

        // Movemos el cursor a la posición final

        control.selectionStart = inicio + texto.length;

        control.selectionEnd = inicio + texto.length;

        control.focus();

    }else if(document.selection){ // IE

        control.focus();

        // Obtenemos la selección y la reemplazamos por el nuevo texto

        seleccion = document.selection.createRange();

        seleccion.text = texto;

        seleccion.select();

    }else{

        // No sabemos dónde está el cursor: insertamos el texto al final

        control.value += texto;

    }

}

Demo

Selecciona cualquier palabra del texto y pulsa algún botón para reemplazarla.

Fallos conocidos

Opera 11 no respeta completamente la posición final del cursor cuando la cadena insertada contiene retornos de carro.

Esta página ha sido impresa el lunes 21 de mayo de 2012 (03:16:59 +0200) desde http://borrame.com/recortes/javascript/reemplazar-seleccion.html. La última vez que miré contenía HTML válido con CSS fresquito y si tiene flatas de ortografía ha sido sin querer.

borrame.com es el sitio anteriormente conocido como bits.demogracia.com (no confundir con Demogracia, que sólo pasaba por ahí).

Lo más fresco

Sugerencias del chef

Lo más visitado

Menú del día

Reemplazar selección

Demo

Fallos conocidos