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, Dec 13 '13 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`
Some Text Here

`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, Dec 13 '13 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, Dec 13 '13 at 19:14
Have you tried using an Xpath expression? e.g. 'x=document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result );' then looping through the results — DBS, Dec 13 '13 at 19:23
Yes - I want to change all div's with the background:#ff4500 to background:#FFFFFF — user3100539, Dec 13 '13 at 19:25

svidgen · Answer 1 · 2013-12-13T20:14:45.577

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

score 0 · Answer 2 · answered Dec 13 '13 at 19:32

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

stackunderflow · Accepted Answer · 2013-12-13T20:40:47.703

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 '13 at 20:40

answered Dec 13 '13 at 19:35

stackunderflow

953
7
17

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. – user3100539 Dec 13 '13 at 19:50
Ah, sorry, I missed that part. But make that `.replace(/^#FF4500$/, '#FFFFFF');` Feel free to fork my JSFiddle. – stackunderflow Dec 13 '13 at 19:53
This is not working. I thought I was putting the replace in the wrong place but it doesn't seem to be working. – user3100539 Dec 13 '13 at 20:02
You're welcome. Looks like jQuery itself does not support color conversions, but there is a separate [jQuery Color](https://github.com/jquery/jquery-color/). I'll leave my answer as is. – stackunderflow Dec 13 '13 at 20:28

score 0 · Answer 4 · answered Dec 13 '13 at 19:39

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.

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

4 Answers4