Get the raw HTML of selected content using javascript

Question

How would I get the raw HTML of the selected content on a page using Javascript? For the sake of simplicity, I'm sticking with browsers supporting window.getSelection.

Here is an example; the content between both | represent my selection.

<p>
    The <em>quick brown f|ox</em> jumps over the lazy <strong>d|og</strong>.
</p>

I can capture and alert the normalized HTML with the following Javascript.

var selectionRange = window.getSelection().getRangeAt(0);
    selectionContents = selectionRange.cloneContents(),
    fragmentContainer = document.createElement('div');
    fragmentContainer.appendChild(selectionContents);
alert(fragmentContainer.innerHTML);

In the above example, the alerted contents would collapse the trailing elements and return the string ox jumps over the lazy d.

How might I return the string ox jumps over the lazy d?

bobince · Accepted Answer · 2011-05-26 00:38:12Z

5

You would have to effectively write your own HTML serialiser.

Start at the selectionRange.startContainer/startOffset and walk the tree forwards from there until you get to endContainer/endOffset, outputting HTML markup from the nodes as you go, including open tags and attributes when you walk into an Element and close tags when you go up a parentNode.

Not much fun, especially if you are going to have to support the very different IE<9 Range model at some point...

(Note also that you won't be able to get the completely raw original HTML, because that information is gone. Only the current DOM tree is stored by the browser, and that means details like tag case, attribute order, whitespace, and omitted implicit tags will differ between the source and what you get out.)

edited May 26, 2011 at 0:38

answered May 25, 2011 at 18:55

bobince

538k111 gold badges675 silver badges846 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bobince Over a year ago

No, not that I can think of either. But it has been asked a few times so someone must have a need for it I guess.

Community · Accepted Answer · 2017-05-23 12:12:03Z

1

Looking at the API's, I don't think you can extract the HTML without it being converted to a DocumentFragment, which by default will close any open tags to make it valid HTML.

See Converting Range or DocumentFragment to string for a similar Q.

edited May 23, 2017 at 12:12

CommunityBot

11 silver badge

answered May 25, 2011 at 18:49

dnolan

2,4191 gold badge20 silver badges22 bronze badges

Collectives™ on Stack Overflow

Get the raw HTML of selected content using javascript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related