IE anterior a 9 no es compatible window.getSelection() . En su lugar, puede usar document.selection (consulte esta página de msdn para ver la descripción). Este objeto de selección tiene un método createRange() que devuelve un objeto TextRange (consulte esta página de msdn para obtener más detalles).

Tenga en cuenta que tanto los objetos de selection como los de textrange de texto son una implementación propia de Microsoft y no siguen los estándares del W3C. Puede leer más sobre el rango de texto y los problemas de range en textrange .

La siguiente implementación funciona en IE:

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

No es tan bueno como la otra implementación ya que tienes que trabajar con cadenas en lugar del dom. Hay un pequeño truco en el que pega <span id="myUniqueId"></span> como marcador de posición y luego lo reemplaza usando el dom. Sin embargo, todavía tiene que trabajar con range.htmlText o range.text .

Por cierto: la implementación anterior es obviamente solo para IE. Tiene que usar alguna capacidad de detección del navegador para decidir qué versión usar.

Pruebe este aquí: http://jsfiddle.net/6BrWe/

Es un poco complicado y no tan bonito, pero debería funcionar en IE y otros navegadores. Sin embargo, no he hecho muchas pruebas en varios navegadores :)

 $('#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); };

Si quieres colorear "Alex Thomas" de rojo, puedes hacerlo

HTML

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

JS

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