Range/Selection get HTML
ran.cloneContents().childNodes[1].innerHTML gives you the complete html.
See jsfiddle or the code snippet.
document.querySelector(".content").addEventListener("click", getHtmlBeforeThis);
function getHtmlBeforeThis(evt) {
const origin = evt.target.closest(".content");
if (origin) {
const selection = document.getSelection();
const offset = selection.anchorOffset;
const range = selection.getRangeAt(0);
range.setStart(origin, 0);
const upToClickedHtml = range.cloneContents().childNodes[1].innerHTML;
range.setEnd(origin, 0);
console.clear();
console.log(upToClickedHtml);
}
}<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>You can use the Rangy library to do this:
rangy.getSelection().toHtml()
Example fiddle