2010-10-22 24 views
29

He estado buscando una respuesta alta y baja pero he fallado.reemplazar el texto seleccionado en contenteditable div

¿Hay una solución de varios navegadores para reemplazar el texto seleccionado en contenteditable div? Simplemente quiero que los usuarios resalten algunos textos y reemplacen el texto resaltado en xxxxx.

Respuesta

63

A continuación se hará el trabajo en todos los principales navegadores:

function replaceSelectedText(replacementText) { 
    var sel, range; 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.rangeCount) { 
      range = sel.getRangeAt(0); 
      range.deleteContents(); 
      range.insertNode(document.createTextNode(replacementText)); 
     } 
    } else if (document.selection && document.selection.createRange) { 
     range = document.selection.createRange(); 
     range.text = replacementText; 
    } 
} 
+4

no puedo creer que sea tan sencillo. Funciona. ¡Gracias! – Judy

+0

Esto no funciona para mí en Chrome (pegar en INPUT, TEXTAREA o editable por contenido). Sospecho que es porque Chrome no admite múltiples rangos. Está cayendo en el caso window.getSelection, pero luego sel.rangeCount es falso, y no hay ninguna cláusula "else". –

+2

@DavidJeske: Esto definitivamente funciona en Chrome para elementos contentos, pero no en entradas o áreas de texto: en non -IE navegadores, este código es específico para las selecciones dentro del contenido regular. –

Cuestiones relacionadas