Get selected text's html in div

Question

I have a div with contentEditable set to true. I have to find selected text html. I am able to get selected text in Firefox by:

window.getSelection();

In case of IE, I am able to get selected text html by using:

document.selection.createRange()

But, how can I find selected text html in Firefox?

@Will Apologies, when i flagged it the question didn't make sense at all, it was originally phrased badly though it's been cleaned up now. — Gordon Thompson, Apr 15 '11 at 13:35
@GordonCarpenter-Thompson: Don't ever forget, anybody can suggest edits, no matter their rep. And asking OP for clarification (as you did) is always better than pulling the trigger on a flag. — , Apr 15 '11 at 13:39

score 31 · Answer 1 · answered Apr 14 '11 at 23:22

31

To get the selected HTML as a string, you can use the following function:

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

answered Apr 14 '11 at 23:22

Tim Down

318,141
75
454
536

You are a life saver!! Big up!! – Adam May 25 '13 at 19:57
This is exactly what I was looking for. Best solution I've found for getting html and text from editable div. Great to use for injecting HTML tags into the selected content (for example, if they're using your div as a form and they want to make some of their text bold) – Shazboticus S Shazbot Jan 23 '15 at 18:31
This almost literally saved my life (and my sanity too!) Great starting point for what I need – BlackBelt2025 Aug 13 '17 at 03:11

Hussein · Accepted Answer · 2011-04-14T21:58:57.063

17

Select text and store it in variable called mytext.

if (!window.x) {
    x = {};
}
x.Selector = {};
x.Selector.getSelected = function() {
    var t = '';
    if (window.getSelection) {
        t = window.getSelection();
    } else if (document.getSelection) {
        t = document.getSelection();
    } else if (document.selection) {
        t = document.selection.createRange().text;
    }
    return t;
}

$(function() {
    $(document).bind("mouseup", function() {
        var mytext = x.Selector.getSelected();
        alert(mytext);
    });
});

Check working example at http://jsfiddle.net/YstZn/1/

edited Apr 14 '11 at 21:58

answered Apr 14 '11 at 21:52

Hussein

42,480
25
113
143

5

`x.Selector.getSelected()` returns a `Selection` object in most browsers and a string containing the selected text in IE <= 8. Neither of those things is the selected HTML, which is what the OP asked for. – Tim Down Apr 15 '11 at 21:15
Tim Down is right, this answer doesn't work. Tim's answer below does work. – frankieandshadow Nov 15 '17 at 14:50

score 2 · Answer 3 · answered Apr 14 '11 at 21:27

window.getSelection().getRangeAt(0);

It returns a document fragment. It contains the nodes where the selection begins and ends and some other juicy stuff. Inspect it with FireBug or another JavaScript console, &&|| for more info

score 0 · Answer 4 · answered Nov 12 '20 at 20:30

According to MDN:

"A Selection object, when cast to string, either by appending an empty string ("") or using Selection.toString(), returns the text selected."

For me, any of the following work in Chrome 86:

String(window.getSelection())
window.getSelection() + ""
window.getSelection().toString()
String(document.getSelection())
document.getSelection() + ""
document.getSelection().toString()

https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection

score 0 · Answer 5 · answered Aug 13 '23 at 10:09

    $('.link').click(function(){
        var mytext = getSelected();
        alert(mytext);
    })

function getSelected() {
    var t = '';
    if (window.getSelection) {
        t = window.getSelection();
    } else if (document.getSelection) {
        t = document.getSelection();
    } else if (document.selection) {
        t = document.selection.createRange().text;
    }
    return t;
}

score -2 · Answer 6 · answered Apr 14 '11 at 20:47

-2

to get the text of a div you do this:(in jQuery)

var text = $('div.selector').text();

answered Apr 14 '11 at 20:47

Naftali

144,921
39
244
303

6

I think he means if he highlights some of the text in a div, how can he get the test that is highlighted. – KingErroneous Apr 14 '11 at 20:51

Get selected text's html in div

6 Answers6

Check working example at http://jsfiddle.net/YstZn/1/

Linked