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

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:

this is testing string for testing purpose 

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

 this is testing string for testing purpose 

¿Cómo lo hago?

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

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); 

Vea aquí para trabajar jsFiddle: http://jsfiddle.net/dKaJ3/2/

 function getSelectionHtml() { var html = ""; if (typeof window.getSelection != "undefined") { var sel = window.getSelection(); if (sel.rangeCount) { var container = document.createElement("div"); for (var i = 0, len = sel.rangeCount; i < len; ++i) { container.appendChild(sel.getRangeAt(i).cloneContents()); } html = container.innerHTML; } } else if (typeof document.selection != "undefined") { if (document.selection.type == "Text") { html = document.selection.createRange().htmlText; } } alert(html); } 

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

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