JS Replace each HEX color with a new random HEX color

Question

Recently I've asked on how to replace a thousand of #FFF with a random HEX color. The solution was to run this code:

var fs = require('fs')
fs.readFile('stars.css', 'utf8', function (err,data) {
  if (err) {
    return console.log(err);
  }
  var result = data.replace(/#FFF/g, () => '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6));

  fs.writeFile('stars.css', result, 'utf8', function (err) {
     if (err) return console.log(err);
  });
});

I'm looking for a way to detect any HEX color within the file, and replace it with a new random HEX color. Here's what I tried:

var result = data.replace(/^#[0-9A-F]{6}$/i.test('#AABBCC'), () => '#' + ("000000" + Math.random().toString(16).slice>

Also, ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6) is the only way for me to get HEX color, as Math.floor(Math.random()*16777215).toString(16) method throws an error on my webpage

Did you try and remove the .test() and just use: .replace(/^#[0-9A-F]{6}$/ig, () => ...) — Nick Parsons
– Nick Parsons, Commented Aug 8, 2020 at 8:18
Try removing the ^ and $ and use Math.floor(Math.random()*16777215).toString(16) to get a new hex — adiga
– adiga, Commented Aug 8, 2020 at 8:37
Didn't work + that method of getting HEX color doesn't work for me, still can't figure out why — Imforpeace
– Imforpeace, Commented Aug 8, 2020 at 8:46

Maxime Helen · Accepted Answer · 2020-08-08 08:57:27Z

1

Replace data.replace(/^#[0-9A-F]{6}$/i.test('#AABBCC'), () => '#' + ("000000" + Math.random().toString(16).slice(2, 8).toUpperCase()).slice(-6)); with:

data.replace(/#[0-9A-F]{3,6}/ig, () => `#${Math.floor(Math.random()*16777215).toString(16)}`);

I added global flag to your regex and found a shorter way to generate a random color from here, besides removing unnecessary .test and deleting ^/$ (matches at the start of the string)

edited Aug 8, 2020 at 8:57

answered Aug 8, 2020 at 8:20

Maxime Helen

1,4129 silver badges17 bronze badges

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

9 Comments

Imforpeace Over a year ago

Unfortunately it didn't work Also, before I settled for the original way of getting a random hex, I tried the method you provided, which unfortunately brought errors to my html page

Imforpeace Over a year ago

Tried var result = data.replace(/#[0-9A-F]{6}/ig, () => '#' + Math.floor(Math.random()*16777215).toString(16)); Oddly only worked for the first hex in the file

Maxime Helen Over a year ago

I am not sure to understand, how did you get these errors if replace doesn't work? The regex should be working from my latest edit, sorry abouth that

Imforpeace Over a year ago

data.replace(/#[0-9A-F]{6}/ig, Math.floor(Math.random()*16777215).toString(16)); managed to replace all HEX colors on a single random one

jdaz Over a year ago

If you are using short hex like #FFF, change #[0-9A-F]{6} to #[0-9A-F]{3,6}

|

PedroMiotti · Accepted Answer · 2021-02-25 20:18:14Z

1

Here is my function to generate a random HEX color :

function randomHEX(){
    const hex = (Math.random()*0xFFFFFF<<0).toString(16);
    return `#${hex}`;
}

answered Feb 25, 2021 at 20:18

PedroMiotti

1,16411 silver badges13 bronze badges

Comments

ashleedawg · Accepted Answer · 2021-11-16 12:09:17Z

0

Generate random hex color:

function rndHex(){return'#'+('00000'+(Math.random()*(1<<24)|0).toString(16)).slice(-6)}

answered Nov 16, 2021 at 12:09

ashleedawg

21.9k9 gold badges82 silver badges120 bronze badges

Collectives™ on Stack Overflow

JS Replace each HEX color with a new random HEX color

3 Answers 3

9 Comments

Comments

Generate random hex color:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

Generate random hex color:

Comments

Your Answer

Sign up or log in

Post as a guest

Related