Javascript documentfragment to string (w/ text selection)

gistfile1.js

// selection range
var range = window.getSelection().getRangeAt(0);

// plain text of selected range (if you want it w/o html)
var text = window.getSelection();
    
// document fragment with html for selection
var fragment = range.cloneContents();

// make new element, insert document fragment, then get innerHTML!
var div = document.createElement('div');
div.appendChild( fragment.cloneNode(true) );

// your document fragment to a string (w/ html)! (yay!)
var html = div.innerHTML;

Nice work. Simple, but helpful.

Great snippet. I suspect Dmitry had no idea what you were trying to show, and thought you were doing this as an alternative to templating languages.

It seems like every few years someone comes along to commend this snippet. I guess I'm next. Great snippet!

nice :-)

Whoops we missed 2018. So I'll leave an extra exclamation mark in lieu:
nice!!

no idea how I ended up here but I guess I have to leave a comment for 2020 !

It's priceless even in 2020. Thank you!

Before, to get string from documentFragment, I did this way :

var map = Array.prototype.map;
return map.call( fragment.childNodes, function(x){ return x.nodeType === x.TEXT_NODE ? x.textContent : x.outerHTML } ).join("");

But your your way is obviously much more elegant and so simple !

So, now I do this way :
var div = document.createElement('div');
div.appendChild( fragment.cloneNode(true) );
return div.innerHTML;

It's almost too easy ... thank you !

This post is gold, thank you everyone! Whish you a happy 2023.