If you want to do some kind of highlighting of the current selection, using the built-in document.execCommand() is the easiest way. It works in all major browsers.

The following should do what you want on any selection, including ones spanning multiple elements. In non-IE browsers it turns on designMode, applies a background colour and then switches designMode off again.

function highlightSelection(colour) { var range, sel;  if (window.getSelection) {   // Non-IE case sel = window.getSelection(); if (sel.getRangeAt) { range = sel.getRangeAt(0); } document.designMode = "on";  if (range) {   sel.removeAllRanges();   sel.addRange(range); } // Use HiliteColor since some browsers apply BackColor to the whole block if ( !document.execCommand("HiliteColor", false, colour) ) { document.execCommand("BackColor", false, colour); } document.designMode = "off"; } else if (document.selection && document.selection.createRange) { // IE case range = document.selection.createRange(); range.execCommand("BackColor", false, colour); } } document.onmouseup = function() { highlightSelection("red"); }; 

Live example: http://www.jsfiddle.net/timdown/eBqBU/

If you want to do some kind of highlighting of the current selection, using the built-in document.execCommand() is the easiest way. It works in all major browsers.

The following should do what you want on any selection, including ones spanning multiple elements. In non-IE browsers it turns on designMode, applies a background colour and then switches designMode off again.

UPDATE

Fixed to work in IE 9.

function makeEditableAndHighlight(colour) { var range, sel = window.getSelection(); if (sel.rangeCount && sel.getRangeAt) { range = sel.getRangeAt(0); }  document.designMode = "on"; if (range) {  sel.removeAllRanges();   sel.addRange(range);  } // Use HiliteColor since some browsers apply BackColor to the whole block  if (!document.execCommand("HiliteColor", false, colour)) { document.execCommand("BackColor", false, colour); }  document.designMode = "off"; } function highlightSelection(colour) { var range;   if (window.getSelection) { // IE9 and non-IE  try {   if (!document.execCommand("BackColor", false, colour)) {   makeEditableAndHighlight(colour); } } catch (ex) {  makeEditableAndHighlight(colour) } } else if (document.selection && document.selection.createRange) { // IE <= 8 case range = document.selection.createRange(); range.execCommand("BackColor", false, colour); } } document.onmouseup = function() { highlightSelection("red"); }; 

Live example: http://jsfiddle.net/eBqBU/9/

If you want to do some kind of highlighting of the current selection, using the built-in document.execCommand() is the easiest way. It works in all major browsers.

The following should do what you want on any selection, including ones spanning multiple elements. In non-IE browsers it turns on designMode, applies a background colour and then switches designMode off again.

function highlightSelection(colour) { var range, sel; if (window.getSelection) { // Non-IE case sel = window.getSelection(); if (sel.getRangeAt) { range = sel.getRangeAt(0); } document.designMode = "on"; if (range) { sel.removeAllRanges(); sel.addRange(range); } // Use HiliteColor since some browsers apply BackColor to the whole block if ( !document.execCommand("HiliteColor", false, colour) ) { document.execCommand("BackColor", false, colour); } document.designMode = "off"; } else if (document.selection && document.selection.createRange) { // IE case range = document.selection.createRange(); range.execCommand("BackColor", false, colour); } } 

If you want to do some kind of highlighting of the current selection, using the built-in document.execCommand() is the easiest way. It works in all major browsers.

The following should do what you want on any selection, including ones spanning multiple elements. In non-IE browsers it turns on designMode, applies a background colour and then switches designMode off again.

function highlightSelection(colour) { var range, sel; if (window.getSelection) { // Non-IE case sel = window.getSelection(); if (sel.getRangeAt) { range = sel.getRangeAt(0); } document.designMode = "on"; if (range) { sel.removeAllRanges(); sel.addRange(range); } // Use HiliteColor since some browsers apply BackColor to the whole block if ( !document.execCommand("HiliteColor", false, colour) ) { document.execCommand("BackColor", false, colour); } document.designMode = "off"; } else if (document.selection && document.selection.createRange) { // IE case range = document.selection.createRange(); range.execCommand("BackColor", false, colour); } }   document.onmouseup = function() { highlightSelection("red"); }; 

Live example: http://www.jsfiddle.net/timdown/eBqBU/