How to get selected html text with javascript? [duplicate] How to get selected html text with javascript? [duplicate] javascript javascript

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