Javascript Highlight Selected Range Button

Question

I'm attempting to create a study tool for a page that allows a user to select any text on the page and click a button. This click then formats the selected text with a yellow background. I can make this work inside of a single tag, but if the range of selection is across multiple tags (for instance, the first LI in an unordered list along with half of the second), I have difficulty applying the style. I can't just wrap the selection with a span here unfortunately.

Basically, I want the effects associated with contentEditable and execCommand without actually making anything editable on the page except to apply a background color to the selected text with the click of a button.

I'm open to jQuery solutions, and found this plug-in that seems to simplify the ability to create ranges across browsers, but I was unable to use it to apply any formatting to the selected range. I can see from the console that it's picking up on the selection, but using something like:

var selected = $().selectedText(); $(selected).css("background-color","yellow");

has no effect.

Any help pointing me in the right direction would be greatly appreciated.

Answer 1

As far as I know, you won't be able to apply styling to regular text. You some sort of html element to operate on. You could try wrapping the selected text with a span and then style the span.

$().selectedText().wrap("<span></span>").parent().addClass("wrapped").css({backgroundColor: "Yellow"});

I added a class of "wrapped" as well, so that on subsequent attempts to highlight text, you can remove previous highlights.

$(".wrapped").each(function(){ ($(this).replaceWith( $(this).text() });

Code is untested.

Answer 2

The following should do what you want. In non-IE browsers it turns on designMode, applies a background colour and then switches designMode off again.

function highlight(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);
    }
}