Change CSS of selected text using Javascript

Question

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?

Possible duplicate: stackoverflow.com/questions/2584301/…, stackoverflow.com/questions/2582831/… and stackoverflow.com/questions/1622629/… — Tim Down
– Tim Down, Commented Jul 11, 2010 at 21:40

Tim Down · Accepted Answer · 2011-11-12 17:15:34Z

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

Greg W · Accepted Answer · 2010-07-11 16:54:09Z

9

Here is a crude example of how it could work. As Zack points out you'll need to be aware of cases where the selection spans multiple elements. This isn't intended to be used as-is, just something to help get ideas flowing. Tested in Chrome.

var selection = window.getSelection();
var text = selection.toString();
var parent = $(selection.focusNode.parentElement);
var oldHtml = parent.html();
var newHtml = oldHtml.replace(text, "<span class='highlight'>"+text+"</span>");
parent.html( newHtml );

answered Jul 11, 2010 at 16:54

Greg W

5,2391 gold badge30 silver badges33 bronze badges

2 Comments

Chris Armstrong Over a year ago

That looks good thanks. In that example, what would the parent element usually be? What if the parent element contained several instances of the string?

Greg W Over a year ago

In my case the parent element was the containing <p> tag. You make a good point about repeated instances of the string, especially if they highlight a common word. I'm not sure how to get around that just yet but I'll post if I think of anything.

zwol · Accepted Answer · 2010-07-11 16:46:23Z

2

To make the highlight stick permanently, I believe you are going to have to wrap the selection in a new DOM element (span should do), to which you can then attach style properties. I don't know if jQuery can do that for you. Keep in mind that selections can span element boundaries, so in the general case you're going to have to inject a whole bunch of new elements

answered Jul 11, 2010 at 16:46

zwol

142k39 gold badges272 silver badges388 bronze badges

Comments

SLaks · Accepted Answer · 2010-07-11 16:03:10Z

1

In Firefox, you can use the ::-moz-selection psuedo-class.
In Webkit, you can use the ::selection pseudo-class.

answered Jul 11, 2010 at 16:03

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

1 Comment

Chris Armstrong Over a year ago

thanks, but I'm wanting to permanently change the CSS, so it stays highlighted even when I deselect it. Also needs to work cross-browser

Community · Accepted Answer · 2017-05-23 11:54:33Z

0

I like Tim's answer, it's clean and fast. But it also shuts down the doors to doing any interactions with the highlights.

Inserting inline elements directly around the texts is a bad choice, as they broke the text flow and mess things up in complex situations,

So I suggest a dirty hack that

calculates the absolute layout of each line of selected text (no matter where they are),
then insert colored, semi-transparent inline-block elements in the end of the document body.

This chrome extension is an example of how this can be done.

It uses API from this library to get the absolute layout of each selected line.

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Apr 23, 2017 at 23:12

lowatt

3632 silver badges18 bronze badges

Comments

schenney · Accepted Answer · 2024-02-05 15:06:57Z

0

The CSS Highlight API, https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API, is designed to do what you want. In JS you can mark ranges as having a named highlight style, and in CSS you define what that highlight is. The browser should do something that looks like selection, but is persistent.

For example:

<style>
  div::highlight(foo) {
    background-color: green;
  }
</style>
<div id="highlighted">This is highlighted text</div>
<script>
  let r = new Range();
  r.setStart(highlighted, 0);
  r.setEnd(highlighted, 1);
  let h = new Highlight(r);
  CSS.highlights.set('foo', h);
</script>

edited Feb 5, 2024 at 15:06

answered Jan 30, 2024 at 1:42

schenney

266 bronze badges

Collectives™ on Stack Overflow

Change CSS of selected text using Javascript

6 Answers 6

Comments

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related