Converting Range or DocumentFragment to string

javascript selection range tostring documentfragment
SamGoody picture SamGoody · Feb 4, 2011 · Viewed 19.1k times · Source

Is there a way to get the html string of a JavaScript Range Object in W3C compliant browsers?

For example, let us say the user selects the following: Hello <b>World</b>
It is possible to get "Hello World" as a string using the Range.toString() method. (In Firefox, it is also possible using the document's getSelection method.)

But I can't seem to find a way to get the inner HTML.

After some searching, I've found that the range can be converted to a DocumentFragment Object.

But DocumentFragments have no innerHTML property (at least in Firefox; have not tried Webkit or Opera).
Which seems odd to me: It would seem obvious that there should be some way to acces the selected items.

I realize that I can create a documentFragment, append the document fragment to another element, and then get the innerHTML of that element.
But that method will auto close any open tags within the area I select.
Besides that there surely is an obvious "better way" than attaching it to the dom just to get it as a string.

So, how to get the string of the html of a Range or DocFrag?

Answer

Brian M. Hunt picture Brian M. Hunt · Jul 17, 2014

FWIW, the jQuery way:

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

Related questions

Select range in contenteditable div

I've got a contenteditable div and a few paragraphs in it. Here's my code: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> &…

Read More
Persisting the changes of range objects after selection in HTML

Is there a way to save the changes like changing the background of HTML text that span over multiple tags so that when it is loaded again the changes made should be reflected in the HTML page. EDIT: Detailed explanation. …

Read More
contenteditable div backspace and deleting text node problems

There are so many issues with contenteditable divs and deleting html and/or non content editable content inside editable divs. Using an answer by the excellent Tim Down here: How to delete an HTML element inside a div with attribute …

Read More