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;
}