How to get selected html text with javascript? [duplicate]
Here's a function that will get you HTML corresponding to the current selection in all major browsers. It also handles multiple ranges within a selection (currently only implemented in Firefox):
function getSelectionHtml() { var html = ""; if (typeof window.getSelection != "undefined") { var sel = window.getSelection(); if (sel.rangeCount) { var container = document.createElement("div"); for (var i = 0, len = sel.rangeCount; i < len; ++i) { container.appendChild(sel.getRangeAt(i).cloneContents()); } html = container.innerHTML; } } else if (typeof document.selection != "undefined") { if (document.selection.type == "Text") { html = document.selection.createRange().htmlText; } } return html;}alert(getSelectionHtml());
In IE <= 10 browsers, it's:
document.selection.createRange().htmlText
As @DarrenMB pointed out IE11 no longer supports this. See this answer for reference.
In non-IE browsers, I just tried playing with this... this seems to work, WILL have side effects from breaking nodes in half and creating an extra span, but it's a starting point:
var range = window.getSelection().getRangeAt(0), content = range.extractContents(), span = document.createElement('SPAN');span.appendChild(content);var htmlContent = span.innerHTML;range.insertNode(span);alert(htmlContent);
Unfortunately, I can't seem to put the node back as it was (since you can be pulling half the text from a span, for instance).
Here's what I came up with. Tested with IE, Chrome, Firefox, Safari, Opera. Doesn't return empty string.
function getSelected() { var text = ""; if (window.getSelection && window.getSelection().toString() && $(window.getSelection()).attr('type') != "Caret") { text = window.getSelection(); return text; } else if (document.getSelection && document.getSelection().toString() && $(document.getSelection()).attr('type') != "Caret") { text = document.getSelection(); return text; } else { var selection = document.selection && document.selection.createRange(); if (!(typeof selection === "undefined") && selection.text && selection.text.toString()) { text = selection.text; return text; } } return false;}