javascript: search and replace hexadecimal color code with a different color code

Question

I am trying to use Javascript to search a Wordpress page for a specific hexadecimal code and replace that code with another code. The code is #FF4500 and I would like to replace it with #FFFFFF. I've tried several solutions online already using JSFiddle but have not been able to get it to work.

The HTML:

<div style="padding:5px;background:#FF4500;text-align:center;">Some Text Here</div><br>

Here's what I tried:

$(document).ready(function() {
    $('div').each(function () {
        var $this = $(this);
        $this.html($this.text().replace(*FF4500, FFFFFF));
    });
});

Is this for use with something like Greasemonkey or a Chrome script? I presume you don't have access to the page itself (Or you could simply add an ID to the elements) — DBS
– DBS, Commented Dec 13, 2013 at 19:07
I don't have access to assign an id - obviously - because that would be super simple and I've been working on a solution for HOURS... code<div style="padding:5px;background:#FF4500;text-align:center;">Some Text Here</div><br>code Here's what I tried: code $(document).ready(function(){ $('div').each(function () { var $this = $(this); $this.html($this.text().replace(*FF4500, FFFFFF)); }); }); code — user3100539
– user3100539, Commented Dec 13, 2013 at 19:10
So if i understand correctly, you want to change different CSS properties (color, background-color etc.) that use color #FF4500 to #FFFFFF ? Are they all divs? Are they all the same css property (background for example)? — user1695032
– user1695032, Commented Dec 13, 2013 at 19:14

svidgen · Accepted Answer · 2013-12-13 20:14:45Z

1

Vanilla.

function changeColorRecursive(root, oldColor, newColor) {
  if (root.style) {
    for (var i in root.style) {
      if (typeof(root.style[i]) == 'string' && root.style[i].toLowerCase() == oldColor.toLowerCase())
        root.style[i] = newColor;
    }
  }

  if (root.childNodes) {
    for (var i = 0; i < root.childNodes.length; i++) {
      changeColorRecursive(root.childNodes[i], oldColor, newColor);
    }
  }
}

changeColorRecursive(document.body, "#FF4500", "#FFFFFF");

edited Dec 13, 2013 at 20:14

answered Dec 13, 2013 at 19:24

svidgen

14.4k4 gold badges37 silver badges60 bronze badges

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

Comments

stackunderflow · Accepted Answer · 2013-12-13 20:40:47Z

0

OK, I was too slow, but I added some special effect.

You should start a new JSFiddle yourself next time.

The rgb matching definitely is brittle, should be normalized back to #RRGGBB, but it's a first working version.

Try upated http://jsfiddle.net/anaran/he6WE/

JS

$(document).ready(function() {
    $('div').each(function () {
        console.log(this.style.backgroundColor);
        if (this.style.backgroundColor.match(/^rgb\(255, 69, 0\)$/)) {
            this.style.transition = 'linear 2s';
            this.style.backgroundColor = '#FFFFFF';
    }
    });
});

While I was at it...

http://jsfiddle.net/anaran/he6WE/35/ uses jQuery UI 1.10.3 as well as jQuery 2.0.2 and apparently has jQuery Color support:

$(document).ready(function() {
    $('div').each(function () {
        // console.warn($.Color(this.style.backgroundColor).toHexString(false));
        if ($.Color(this.style.backgroundColor).toHexString(false).match(/^#FF4500$/i)) {
            this.style.transition = 'linear 2s';
            this.style.backgroundColor = '#FFFFFF';
    }
    });
});

edited Dec 13, 2013 at 20:40

answered Dec 13, 2013 at 19:35

stackunderflow

9917 silver badges17 bronze badges

4 Comments

user3100539 Over a year ago

Okay - this is working to actually change the color of the div background but, since I have other div's on the page that I do not want to have a white background, I need to target and change only the div with the current backgroundColor: #FF4500.

stackunderflow Over a year ago

Ah, sorry, I missed that part. But make that .replace(/^#FF4500$/, '#FFFFFF'); Feel free to fork my JSFiddle.

user3100539 Over a year ago

This is not working. I thought I was putting the replace in the wrong place but it doesn't seem to be working.

stackunderflow Over a year ago

You're welcome. Looks like jQuery itself does not support color conversions, but there is a separate jQuery Color. I'll leave my answer as is.

user1695032 · Accepted Answer · 2013-12-13 19:32:45Z

0

You can't really compare to hex, because css() returns rgb. And you can't ask for background because you get other attributes as well. Ok with jQuery i think this should work:

$(document).ready(function(){ 
  $('div').each(function () {
    if( $(this).css('background-color') == 'rgb(255, 69, 0)') {
      $(this).css('background-color', '#FFFFFF')
    }
  }); 
});

answered Dec 13, 2013 at 19:32

user1695032

1,1426 silver badges10 bronze badges

Comments

talemyn · Accepted Answer · 2013-12-13 19:39:24Z

0

You can use the JQuery attribute selectors to do this:

$("div[style*='background:#FF4500;']").each(function() {
    var currStyle = $(this).attr("style");
    $(this).attr("style", currStyle.replace("background:#FF4500;", "background:#FFFFFF;"));
});

The selector will grab all <div> elements that contain a style with background:#FF4500; and then go into each one and replace that background style with the new one.

This is highly dependent on the background style being consistently created (which, I would think it would be, given that it's from Wordpress). Also, I am including the word "background" in the replace, to avoid replacing that hex-value elsewhere in the style.

answered Dec 13, 2013 at 19:39

talemyn

8,0004 gold badges33 silver badges52 bronze badges

Collectives™ on Stack Overflow

javascript: search and replace hexadecimal color code with a different color code

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related