Javascript Quandary: Creating a highlighter pen to

Question

I'm working on a little JS plugin that I want to function exactly like a real highlighter pen. Take a standard div of html text (with children), select text with mouse, and leave the highlighting intact on mouse up. Seems fairly straight forward, right?

Here is what I have so far: http://efflux.us/text/views/select.php (the window on the right just outputs your selection for testing purposes)

So if you select a few words of text, everything works fine. Try selecting a few groups of words, and you'll notice the css background changes. However, I have two glaring issues...

1) Selecting multiple lines of text does not work. When selecting multiple lines, the getSelection() function does not grab the <br /> tags.. which are needed to match up the string inside the main container <div class='text>. These <br /> tags are crucial to the app I'm building, so they are definitely needed. When removing them, multiple lines can be selected.

2) When selecting a common word or phrase, every instance of it gets highlighted. I would like just the selected text to be highlighted, but can't figure it out. Try selecting the very first word "The"... you'll see what happens.

Side notes.. I'm basing the highlighting functionality off Johann Burkard's highlight plugin.. but can't think of any way to further modify the script. I'm willing to write something fresh, but have been racking my brain to figure it out.

Any help would be appreciated!!

Answer 1

Actually, this is reasonably straightforward using document.execCommand(). It's slightly complicated by the fact that you need to temporarily make the document editable in non-IE browser for document.execCommand() to work, which in turn destroys the selection in some browsers, but that's easy enough to work around. It works in all major browsers, including IE 6.

UPDATE: Fixed for IE 9.

jsFiddle: http://jsfiddle.net/timdown/Hp7Zs/32/

Code:

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, sel;
    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);
    }
}