Remove highlight added to selected text using JavaScript?

Question

I highlighted selected text using JavaScript with the following code:

var sel = window.getSelection();
if(!sel.isCollapsed) {
    var range = sel.getRangeAt(0);
    sel.removeAllRanges();
    document.designMode = "on";
    sel.addRange(range);
    document.execCommand("HiliteColor", false, "#ffffcc");
    sel.removeAllRanges();
    document.designMode = "off";
}

How do I then remove the highlighted color and restore the text?

There are a lot of cross-browser hassles with this stuff. You might want to look at a library called Rangy that helps smooth them over, and offers highlighting features as in this demo. (I have no affiliation with Rangy.) — T.J. Crowder
– T.J. Crowder, Commented Nov 10, 2011 at 10:13
Tricky. I've seen this asked before and there's no easy way. — Tim Down
– Tim Down, Commented Nov 10, 2011 at 10:24
Re Rangy, I'm the author, and it won't really help you with this (yet: I'm working on it), unless you used a CSS class to do the highlighting instead, in which case you could use the CSS class applier module: code.google.com/p/rangy/wiki/CSSClassApplierModule — Tim Down
– Tim Down, Commented Nov 10, 2011 at 10:26
@T.J.Crowder Can I use Rangy library with UIWebView on ios4.2 or later platform? — PhoenixJon
– PhoenixJon, Commented Nov 12, 2011 at 13:33

Tim Down · Accepted Answer · 2011-11-12 17:39:06Z

8

Here's some code to add and remove highlights. It's too long to post here practically, so I've made a demo and posted a snippet below. It's not quite ideal because the unhighlight() function doesn't remove <span> elements inserted by the highlight command, but with a little care this would be a possible addition.

Live demo: http://jsfiddle.net/timdown/Bvd9d/

Code snippet:

function unhighlight(node, colour) {
    if (!(colour instanceof Colour)) {
        colour = new Colour(colour);
    }

    if (node.nodeType == 1) {
        var bg = node.style.backgroundColor;
        if (bg && colour.equals(new Colour(bg))) {
            node.style.backgroundColor = "";
        }
    }
    var child = node.firstChild;
    while (child) {
        unhighlight(child, colour);
        child = child.nextSibling;
    }
}

answered Nov 12, 2011 at 17:39

Tim Down

326k76 gold badges461 silver badges546 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

amp343 Over a year ago

Tim, this is amazing. For some reason the unhighlight fn was giving me an error when it tries to create a new Colour object (in the wild). No worries though, I'm not particular that the unhighlight color matches the highlight color; I'd rather just get rid of all highlights. So, to get around it, I just removed the condition "if(bg && colour.equals(new Colour(bg)))". Thanks.

Exception Over a year ago

@Tim Down Could you please check this.. In demo the button is not highlighting. Please check. It would be great help.

Tim Down Over a year ago

@SoI: I think I missed you comment. Which browser is showing the problem?

prime Over a year ago

@Tim Down: rather than just get rid of all highlights can we unhighlight any specific selected highlighted text area ?

SmallChess Over a year ago

Yes we can. Use the solution posted in stackoverflow.com/questions/1335252/…

Niet the Dark Absol · Accepted Answer · 2011-11-10 10:11:10Z

4

You could use CSS instead:

<style>
    ::selection {background-color: #ffffcc;}
</style>

EDIT: Update in response to comment and clarification

<script type="text/javascript">
    var spans = document.getElementsByTagName('span'), i;
    for( i=0; i<spans.length; i++) {
       if( spans[i].style.backgroundColor == "#ffffcc") {
           // Two alternatives. This:
           spans[i].style.backgroundColor = "transparent";
           // OR this, if spans contain only text:
           spans[i].parentNode.replaceChild(spans[i].firstChild,spans[i]);
           i--;
           // End alternatives - only include i-- in the second one
       }
    }
</script>

Although, this fails in some browsers (I think it's Firefox) where the element style is changed to the computed style.

edited Nov 10, 2011 at 10:11

answered Nov 10, 2011 at 7:53

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

5 Comments

PhoenixJon Over a year ago

I think you misunderstand my question. I want to do it dynamically using javascript.

Some Guy Over a year ago

@PhoenixJon this will be dynamic. It'll change the background color of only the text that is selected. Not using JavaScript, but it'll work like you want it to.

PhoenixJon Over a year ago

@Amaan Thanks for your comment. Er.. What i want is when i select the text and press "highlight" button, then the selected text remains highlighted. And again when i pressed "remove" button, highlighted text becomes normal text. Something like this..

PhoenixJon Over a year ago

Thanks. I want to know when execCommand is executed, the span tag is added? If so, tag name or id exists in that tag? or only set background color?

Niet the Dark Absol Over a year ago

The last time I checked, the command wraps a <span> tag around the range with the appropriate style applied.

Nightfirecat · Accepted Answer · 2011-11-10 19:13:23Z

-1

Use

sel.removeAllRanges()

edited Nov 10, 2011 at 19:13

Nightfirecat

11.6k6 gold badges37 silver badges53 bronze badges

answered Nov 10, 2011 at 8:14

satin

7072 gold badges7 silver badges19 bronze badges

2 Comments

satin Over a year ago

and i dont think u'll need to do anything else . all the background color will be restored automatically .

T.J. Crowder Over a year ago

He's already using removeAllRanges. The issue is that he's executed the hilitecolor command on a range, and so it now has that, and he wants to remove it later.

Collectives™ on Stack Overflow

Remove highlight added to selected text using JavaScript?

3 Answers 3

5 Comments

5 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

5 Comments

2 Comments

Linked

Related