CODEWITHSUNDEEP
javascript
user3100539
user3100539

Reputation: 3

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

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

Upvotes: 0

Views: 3213

Answers (4)

stackunderflow
stackunderflow

Reputation: 993

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

Upvotes: 0

svidgen
svidgen

Reputation: 14302

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

Upvotes: 1

talemyn
talemyn

Reputation: 7950

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.

Upvotes: 0

user1695032
user1695032

Reputation: 1142

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

Upvotes: 0

Related Questions