Conversión de rango o fragmento de documento en la cadena

Question

¿Hay alguna manera de obtener la cadena html de un objeto de rango de JavaScript en los navegadores compatibles con W3C?

Por ejemplo, digamos que el usuario selecciona la siguiente: Hello <b>World</b>
Es posible conseguir "Hello World" como una cadena utilizando el método Range.toString(). (En Firefox, también es posible utilizar el documento 's getSelection método.)

Pero me parece que no puede encontrar una manera de obtener el código HTML interno.

Después de algunas búsquedas, he encontrado que el rango se puede convertir en un objeto DocumentFragment.

Pero DocumentFragments no tienen innerHTML propiedad (al menos en Firefox, no han intentado Webkit u Opera).
Lo que me parece extraño: parecería obvio que debería haber alguna forma de acceder a los elementos seleccionados.

Me doy cuenta de que puedo crear un documentFragment, anexar el fragmento del documento a otro elemento, y luego obtener el innerHTML de ese elemento.
Pero ese método cerrará automáticamente cualquier etiqueta abierta dentro del área que seleccione.
Además de eso, seguramente hay una "mejor manera" obvia que unirlo al dom solo para obtenerlo como una cadena.

Entonces, ¿cómo obtener la cadena del html de un rango o DocFrag?

Answer 1

No, esa es la única forma de hacerlo. Las especificaciones DOM Level 2 de hace aproximadamente 10 años no tenían casi nada en términos de serialización y deserialización de nodos desde y hacia el texto HTML, por lo que estás obligado a confiar en extensiones como innerHTML.

En cuanto a su comentario de que

Pero ese método de auto cierre todas las etiquetas abiertos dentro del área que seleccione.

... ¿de qué otro modo podría funcionar? El DOM está formado por nodos dispuestos en un árbol. Copiar contenido del DOM solo puede crear otro árbol de nodos. Los nodos de elementos están delimitados en HTML por un comienzo y, a veces, una etiqueta de finalización. Una representación HTML de un elemento que requiere una etiqueta final debe tener una etiqueta final, de lo contrario no es HTML válido.

Answer 2

Para explicar un ejemplo de here:

//Example setup of a fragment 
var frag = document.createDocumentFragment(); //make your fragment 
var p = document.createElement('p'); //create <p>test</p> DOM node 
p.textContent = 'test'; 
frag.appendChild(p ); 

//Outputting the fragment content using a throwaway intermediary DOM element (div): 
var div = document.createElement('div'); 
div.appendChild(frag.cloneNode(true)); 
console.log(div.innerHTML); //output should be '<p>test</p>' 

Answer 3

Fwiw, la forma jQuery:

$('<div>').append(fragment).html()