¿Cómo insertar un elemento en la posición seleccionada en el documento HTML?

Question

Quiero insertar un elemento (span, div, etc.) en la posición determinada por la selección del usuario de texto en el documento.

Pude obtener el elemento en el que se realiza la selección. Pero no puedo obtener la posición exacta donde se realiza la selección.

Por ejemplo:

<span>this is testing string for testing purpose</span> 

En esto, supongamos que el usuario seleccionó segunda palabra 'prueba'. Quiero que sea reemplazado como

<span>this is testing string for <b>testing</b> purpose</span> 

¿Cómo lo hago?

Por cierto: Sé que es posible. Google Wave lo hace. Simplemente no sé cómo hacerlo

Answer 1

Esto hará el trabajo:

function replaceSelectionWithNode(node) { 
    var range, html; 
    if (window.getSelection && window.getSelection().getRangeAt) { 
     range = window.getSelection().getRangeAt(0); 
     range.deleteContents(); 
     range.insertNode(node); 
    } else if (document.selection && document.selection.createRange) { 
     range = document.selection.createRange(); 
     html = (node.nodeType == 3) ? node.data : node.outerHTML; 
     range.pasteHTML(html); 
    } 
} 

var el = document.createElement("b"); 
el.appendChild(document.createTextNode("testing")); 
replaceSelectionWithNode(el); 

Answer 2

El método para recuperar el texto seleccionado actual difiere de un navegador a otro. Varios plugins jQuery ofrecen soluciones multiplataforma.

(véase también http://api.jquery.com/select/)