24

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...

9
  • 1
    @Alex IE prior to 9 does not implement getSelection(). Commented Mar 24, 2011 at 15:52
  • 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
    Commented Mar 24, 2011 at 15:55
  • @Alex Your demo works in all current browsers( IE9, FF4, Chrome 10, Safari 5, and Opera 11). Commented Mar 24, 2011 at 16:00
  • 2
    +1 This is a great getSelection demo. Commented Mar 24, 2011 at 16:02
  • 3
    +1 excellent question and demo Commented Mar 24, 2011 at 16:23

3 Answers 3

24

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.

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

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);
};
2
  • 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.
    – user1385191
    Commented Mar 24, 2011 at 21:49
  • OP had jQuery there, so I did not change that part Commented Mar 24, 2011 at 22:14
-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');
});
1
  • 5
    He wants to make the highlighted section of 'Alex Thomas' red, not the whole thing.
    – gen_Eric
    Commented Mar 24, 2011 at 18:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.