15

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();

I 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. How can in do this.Please help.

Xavi
  • 19,751
  • 14
  • 71
  • 63
Niraj Choubey
  • 3,770
  • 18
  • 57
  • 92

5 Answers5

28

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;
}
Tim Down
  • 306,503
  • 71
  • 443
  • 520
  • 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
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/

Hussein
  • 41,814
  • 25
  • 111
  • 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
2
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

Zirak
  • 37,288
  • 12
  • 78
  • 90
0

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

jerblack
  • 1,057
  • 12
  • 15
-2

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

var text = $('div.selector').text();
Naftali
  • 142,114
  • 39
  • 237
  • 299