Range / Selection get HTML

Question

I have this fiddle: http://jsfiddle.net/Uddaa/

Currently, what he does is when you click on the text, he will do a warning with the text to this point. What can I do to get html to this point, not just text?

JavaScript:

$(".content").on("click", function () { getBefore(); }); function getBefore() { var sel = document.getSelection(); var off = sel.anchorOffset; var ran = sel.getRangeAt(0); ran.setStart($(".content").get(0), 0); alert(ran.toString()); } 

HTML:

 <div class="content"> <p><b>Click</b> anywhere <u>within <em>the</em> text</u> to to see the code up to that point.</p> </div> 

Answer 1

ran.cloneContents().childNodes[1].innerHTML gives you the full html.

See jsfiddle

Answer 2

You can use the Rangy library to do this:

 rangy.getSelection().toHtml() 

Script example