getSelection() not working in IE

Question

Can someone help me get this code working in IE please:

HTML:

<p>Alex Thomas</p>
<button id="click">Click</button>

JS

$('#click').click(function(){
    var range = window.getSelection().getRangeAt(0);
    var selectionContents = range.extractContents();
    var span = document.createElement("span");
    span.style.color = "red";
    span.appendChild(selectionContents);
    range.insertNode(span);
});

Coded up here: http://jsfiddle.net/WdrC2/

Thanks in advance...

The code works for me in Chrome 8. I selected the text and clicked the button, and the text became red, so something works. — Blender, Mar 24 '11 at 15:55
@Alex Your demo works in all current browsers( IE9, FF4, Chrome 10, Safari 5, and Opera 11). — Šime Vidas, Mar 24 '11 at 16:00
@Alex I believe IE implements the `selectionStart` and `selectionEnd` properties. You might want to look into that... — Šime Vidas, Mar 24 '11 at 16:39
You can replace these lines: selectionContents = range.extractContents(); span.appendChild(selectionContents); range.insertNode(span); With this: range.surroundContents(span); — Scott Smith, Dec 27 '12 at 20:15

Elian Ebbing · Accepted Answer · 2011-03-24T20:15:07.720

IE prior to 9 doesn't support window.getSelection(). You can use document.selection instead (see this msdn page for the description). This selection object has a method createRange() that returns a TextRange object (see this msdn page for details).

Note that both the selection and textrange objects are Microsofts own implementation and do not follow the W3C standards. You can read more about the textrange and range issues on www.quirksmode.org/dom/range_intro.html.

The following implementation works in IE:

$('#click').click(function(){
    var range = document.selection.createRange();
    range.pasteHTML("<span style='color: red'>" + range.htmlText + "</span>");
});

It's not nearly as nice as the other implementation since you have to work with strings instead of the dom. There is a little hack where you paste <span id="myUniqueId"></span> as a placeholder, and afterwards replace it using the dom. You still have to work with range.htmlText or range.text though.

BTW: the above implementation is obviously IE only. You have to use some browser capability detection to decide which version to use.

Are you sure IE9 doesn't support `window.getSelection()`? http://msdn.microsoft.com/en-us/library/ie/ff975169(v=vs.85).aspx says it does.. — Rijk, May 10 '13 at 09:55
@Rijk You are right, that's why I wrote "IE *prior* to 9 doesn't support window.getSelection()." :) — Elian Ebbing, May 10 '13 at 14:08
In IE 11 `document.selection` returns `undefined` -- I am not too sure if the above answer works. — robskrob, Jun 25 '19 at 15:00

score 1 · Answer 2 · answered Mar 24 '11 at 21:40

Test this one here: http://jsfiddle.net/6BrWe/

It is a bit of a hack and not so pretty but should work in IE and other browsers - I have not done a lot of cross browser testing though :)

$('#click').click(function() {
    var whatBrowser = getIt();
    if (whatIsIt == 'notIE' && whatBrowser) {
        notIE(whatBrowser);
    }
    else if (whatIsIt == "isIE"&& whatBrowser) {
        isIE(whatBrowser);
    };
});

var whatIsIt = "";

function getIt() {
    if (window.getSelection) {
        whatIsIt = "notIE";
        return window.getSelection();
    }
    else if (document.getSelection) {
        whatIsIt = "notIE";
        return document.getSelection();
    }
    else {
        var selection = document.selection && document.selection.createRange();
        if (selection.text) {
            whatIsIt = "isIE";
            return selection;
        };
        return false;
    };
    return false;
};

function isIE(selection) {
    if (selection) {
        var selectionContents = selection.text;
        if (selectionContents) {
            selection.pasteHTML('<span class="reddy">' + selectionContents + '</span>');
        };
    };
};

function notIE(selection) {
    var range = window.getSelection().getRangeAt(0);
    var selectionContents = range.extractContents();
    var span = document.createElement("span");
    span.className= "reddy";
    span.appendChild(selectionContents);
    range.insertNode(span);
};

With all of that JS, I have to wonder why you didn't just do a `document.getElementById("click").onclick` for the first line. However, +1 for a thorough answer that uses feature detection. — , Mar 24 '11 at 21:49

score -4 · Answer 3 · answered Mar 24 '11 at 15:58

-4

If you want to color "Alex Thomas" to red you can do

HTML

<p id='txt'>Alex Thomas</p>
<input type='button' id='btn' value='click' />

JS

$('#click').click(function(){
  $('#txt').attr('color','Red');
});

answered Mar 24 '11 at 15:58

Faber

2,194
2
27
36

5

He wants to make the highlighted section of 'Alex Thomas' red, not the whole thing. – gen_Eric Mar 24 '11 at 18:40

getSelection() not working in IE

3 Answers3

Linked

Related