borrame.com - Colección particular de recortes de código y documentación para programación web

Canales RSS

Lo más fresco

  1. Bookmarklets Nuevo
  2. Recetario básico para CakePHP/2 Nuevo
  3. Certificado auto-firmado Nuevo

Sugerencias del chef

Lo más visitado

  1. Fecha y hora
  2. Dar formato a un número
  3. Reiniciar secuencia
  4. Vaciar un esquema
  5. Certificado auto-firmado
Compartir esta página

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:

  1. Inserta el nuevo texto en la posición del cursor.
  2. Reemplaza el texto seleccionado, si lo hubiera.
  3. 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

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 sábado 23 de septiembre de 2017 (02:22:37 +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í).

© 2005-2017 by Álvaro González (alvaro.es) • Burgos (España) • borrame.com