How to Change the CSS of Selected Text with JavaScript?

Changing CSS of Selected Text with JavaScript

In an effort to create a bookmarklet that highlights selected text on a webpage, a developer encountered an issue where the jQuery code used to change the CSS of the selected text wasn't working.

Original Attempt:

The attempted code used the following function:

function highlightSelText() {
    var SelText;
    if (window.getSelection) {
        SelText = window.getSelection();
    } else if (document.getSelection) {
        SelText = document.getSelection();
    } else if (document.selection) {
        SelText = document.selection.createRange().text;
    }
    $(SelText).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
}

The Solution:

The issue with the original code arose from the inability of jQuery to directly modify the CSS of selected text. A more effective approach is to utilize the execCommand() method, which offers a command to alter the background color in various modern browsers.

The following code demonstrates how to highlight any text selection:

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);
    }
    if (!document.execCommand("HiliteColor", false, colour)) {
        document.execCommand("BackColor", false, colour);
    }
    document.designMode = "off";
}

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

This updated code successfully changes the background color of the selected text, regardless of whether the selection spans multiple elements.

The above is the detailed content of How to Change the CSS of Selected Text with JavaScript?. For more information, please follow other related articles on the PHP Chinese website!