Question

58

Change CSS of selected text using Javascript

rated 0 times [ 65] [ 7] / answers: 1 / hits: 16892 / 14 Years ago, sun, july 11, 2010, 12:00:00

I'm trying to make a JavaScript bookmarklet that will act as a highlighter, changing the background of selected text on a webpage to yellow when the bookmarklet is pressed.

I'm using the following code to get the selected text, and it works fine, returning the correct string

function getSelText() {

    var SelText = '';

    if (window.getSelection) {

        SelText = window.getSelection();

    } else if (document.getSelection) {

        SelText = document.getSelection();

    } else if (document.selection) {

        SelText = document.selection.createRange().text;

    }

    return SelText;

}

However, when I created a similar function to change the CSS of the selected text using jQuery, it isn't working:

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

}

Any ideas?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

aileent

Add To Favorites

Follow

Total Points: 556

Total Questions: 107

Total Answers: 101

Location: Croatia

Member since Fri, Sep 11, 2020

4 Years ago

aileent questions

1 Next.js, getStaticProps not working with component but does with page

Tue, Mar 1, 22, 00:00, 2 Years ago

1 Why am I getting Failed to load extension. Invalid value for 'content_security_policy'?

Fri, Apr 16, 21, 00:00, 3 Years ago

1 Laravel livewire model is not working when updating input field from javascript?

Sun, Nov 29, 20, 00:00, 4 Years ago

1 How to get Input field type as props in react typescript

Wed, Nov 11, 20, 00:00, 4 Years ago

1 React Native Render error missing semicolon

Fri, May 8, 20, 00:00, 4 Years ago

View All

answered 14 Years ago kristiano · Accepted Answer

The easiest way to do this is to use execCommand(), which has a command to change the background colour in all modern 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 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 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);

    }

}