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 * * @version 2011-12-21 */ function reemplazarSeleccion(control, texto){ 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

En Opera (versiones 11 y 12) el cursor puede quedar descolocado cuando la cadena insertada contiene retornos de carro en formato Unix.

Esta página ha sido impresa el miércoles 12 de agosto de 2026 (13:55:07 +0200) desde https://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.

Lorem ipsum dolor sit amet.

Lo más fresco

Sugerencias del chef

Lo más visitado

Menú del día

Reemplazar selección

Demo

Fallos conocidos