Regex round all RGB instances to nearest monochrome, example: `... fill="rgb(252,252,253)" ...` => `... fill="rgb(255,255,255)" ...`

Question

I have a task to replace all RBG instances in a string to the nearest monochrome values. The complexity is slowing down the process and I'd like to know if there's a faster way to replace all the instances in the string.

As you can see bellow, for rounding up to white 255 I just deleted the paths to save time. But it's just a quick hack and not a solution to my problem.

The string is an SVG style text with a lot of data:

// Completely delete white paths:
//svg = svg.replace(/<path[^>]*?fill="rgb\(255[^>]*?\/>/g, '')
svg = svg.replace(/<path[^>]*?fill="rgb\(254[^>]*?\/>/g, '')
svg = svg.replace(/<path[^>]*?fill="rgb\(253[^>]*?\/>/g, '')
...
// Replace almost black with full black
svg = svg.replace(new RegExp('7,7,7', 'g'), '0,0,0')
svg = svg.replace(new RegExp('6,6,7', 'g'), '0,0,0')
svg = svg.replace(new RegExp('6,6,6', 'g'), '0,0,0')
...

As you can see from a part of the code, sometimes not all of the three RGB parameters are the same so it's really slowing down the code and I'm stressing out.

There's a treshold if any of the three RBG parameters is bellow 200, it will be all black 0, otherwise it should be white with all values at 255.

I have only limited experience with regex so this is about as much as I could do. Any improvements would be really helpful.

Maybe https://3widgets.com/ could help: `(\d|[1-9]\d|1\d{2})` matches a number between 0 and 199, `(20\d|2[1-4]\d|25[0-5])` matches a number between 200 and 255. You could surround those patterns with [`\b`](https://www.regular-expressions.info/wordboundaries.html). — sp00m, Nov 02 '21 at 15:21
The source is svg => use the DOMParser, get each fill attribute for each path element, and then extract color values (with a regex if you want). Build a function that takes the 3 numbers and inside which are the rules for colors and that returns black or white (the logic must be here, not in a regex pattern). — Casimir et Hippolyte, Nov 02 '21 at 18:36

Myndex · Answer 1 · 2021-11-12T08:53:35.890

Short answer

This is not really the way to create monochrome, and will usually not be the "nearest" monochrome either. Though I am not clear on what your actual goals are, so let's discuss.

Longer Answer

The R G and B channels do not contribute equally to the total luminance that makes a monochrome version of an image. And also, yes RGB values are not linear in nature. I see that your breakpoint is at value 200, I'm curious how you arrived at that and what the purpose is of splitting something into either black or white.

If you had monochrome values to start with, the middle contrast point is closer to 170. The middle grey breakpoint in terms of surface colors is usually considered to be 18% which works out to 118 in sRGB, due to the nonlinear encoding of the sRGB TRC.

If you want an accurate grayscale, then the procedure would be to first linearize and then apply coefficient to each of the channels and sum them to create a luminance Y.

The down and dirty simple version of the JS code to determine that value given a tuple of sRGB numerical values, finding the mid-point to flip, and related topics I discuss in this answer: https://stackoverflow.com/a/69869976/10315269

But here's a code snippet:

    let Ys = Math.pow(sR/255.0,2.2) * 0.2126 +
             Math.pow(sG/255.0,2.2) * 0.7152 +
             Math.pow(sB/255.0,2.2) * 0.0722; // Andy's Easy Luminance for sRGB. For Rec709 HDTV change the 2.2 to 2.4

This gives you the weighted light value from the monitor, which can then be used to determine a break point.

If we put this together with some regex to help parse values, then:


let container = document.getElementById('BWBlock');

function setSVGtoBW (myOriginalSVG = "<null SVG string>") {


   let rex = /#([0-9a-f]{1,2})([0-9a-f]{1,2})([0-9a-f]{1,2})/ig;
       // regex to parse the hex string
      // We are explicit about 0-9a-f instead of \w, because
     // We no not want to replace ID calls like <use '#newLines'>
   
   function findYflip (match, p1, p2, p3, offset, string) {
       let Ys = Math.pow(parseInt(p1,16)/255.0,2.2) * 0.2126 +
                Math.pow(parseInt(p2,16)/255.0,2.2) * 0.7152 +
                Math.pow(parseInt(p3,16)/255.0,2.2) * 0.0722; // Andy's Easy Luminance Estimate for sRGB. For Rec709 HDTV change the 2.2 to 2.4, and use different coefficients for P3 etc!
       return (Ys > 0.4) ? "#ffffff" : "#000000"; // luminance based color flipper. 
    };
  return myOriginalSVG.replace(rex, findYflip)
};

    // An svg for demo purposes
let placeholder = "<?xml version='1.1' encoding='UTF-8'?> <!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'> <svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='100%' height='100%' viewBox='0 0 494.6 525.8'>  <title>CIE 1931 xyY Gamut Comparison</title>    <defs>   <path id='locus' d='M 150,473 C 147,473 145,471 142,469 C 135,462 129,455 124,446 C 121,441 118,436 116,431 C 113,424 110,416 107,408 C 103,396 99,385 95,373 C 86,339 77,298 72,264 C 66,226 61,179 62,141 C 63,118 65,81 80,60 C 84,54 91,50 98,49 C 105,48 112,51 118,53 C 140,60 160,76 178,90 C 236,135 287,191 339,243 C 360,264 380,284 401,305 C 409,313 417,321 426,329 C 428,332 430,334 433,337 C 434,337 434,338 435,339 C 435,339 436,340 436,340'/>   <path id='gamutStot' d='M 76.875,-30.750  L 153.75,-307.5 L 328,-169.125 Z'/>   <g id='lines'>    <use xlink:href='#gamutStot' stroke='#3377aa' fill='#eeccff' stroke-width='6' />   </g>    <g id='labels'>    <path d='M 520,-865  L 820,-865 L 820,-790 L 520,-790 Z' stroke='#eedd22' stroke-width='4' stroke-linejoin='round' fill='#3300aa'/>    <path d='M 520,-865  L 820,-865 L 820,-790 L 520,-790 Z' stroke='#ffaa11' stroke-width='4' stroke-linejoin='round' fill='#6622ff' transform='translate(0,100)'   />    <path d='M 520,-865  L 820,-865 L 820,-790 L 520,-790 Z' stroke='#6622ff' stroke-width='4' stroke-linejoin='round' fill='#ffaa11' transform='translate(0,200)'   />       <path d='M 520,-865  L 820,-865 L 820,-790 L 520,-790 Z' stroke='#3300aa' stroke-width='4' stroke-linejoin='round' fill='#eedd22'  transform='translate(0,300)'   />      <text x='540' y='-10'  text-anchor='start' fill='#3300aa' font-size='15'>Copyright © 2021 Myndex Research</text>   </g>  </defs>   <use stroke='#234567' stroke-width='2' fill='#ccddee' xlink:href='#locus'/>   <path stroke='#6622cc' stroke-width='2.75' stroke-linecap='square' fill='none' d='M 60,15 v 461 h 410 M 60,476 v 4 M 86,476 v 4 M 111,476 v 4 M 137,476 v 4 M 162,476 v 4 M 188,476 v 4 M 214,476 v 4 M 239,476 v 4 M 265,476 v 4 M 290,476 v 4 M 316,476 v 4 M 342,476 v 4 M 367,476 v 4 M 393,476 v 4 M 418,476 v 4 M 444,476 v 4 M 470,476 v 4 M 60,476 h -4 M 60,450 h -4 M 60,425 h -4 M 60,399 h -4 M 60,373 h -4 M 60,348 h -4 M 60,322 h -4 M 60,297 h -4 M 60,271 h -4 M 60,245 h -4 M 60,220 h -4 M 60,194 h -4 M 60,169 h -4 M 60,143 h -4 M 60,117 h -4 M 60,92 h -4 M 60,66 h -4 M 60,41 h -4 M 60,15 h -4'/>    <path opacity='0.5' stroke='#88aaff' stroke-dasharray='4,4' stroke-width='3' fill='none' d='M 85.5,475.5 v -460.8 M 111.5,475.5 v -460.8 M 136.5,475.5 v -435.2 M 162.5,475.5 v -409.6 M 188.5,475.5 v -384 M 213.5,475.5 v -358.4 M 239.5,475.5 v -332.8 M 264.5,475.5 v -307.2 M 290.5,475.5 v -281.6 M 316.5,475.5 v -256 M 341.5,475.5 v -230.4 M 367.5,475.5 v -204.8 M 392.5,475.5 v -179.2 M 418.5,475.5 v -153.6 M 444.5,475.5 v -128 M 469.5,475.5 v -102.4 M 60.5,450.5 h 409.6 M 60.5,424.5 h 409.6 M 60.5,399.5 h 409.6 M 60.5,373.5 h 409.6 M 60.5,347.5 h 384 M 60.5,322.5 h 358.4 M 60.5,296.5 h 332.8 M 60.5,271.5 h 307.2 M 60.5,245.5 h 281.6 M 60.5,219.5 h 256 M 60.5,194.5 h 230.4 M 60.5,168.5 h 204.8 M 60.5,143.5 h 179.2 M 60.5,117.5 h 153.6 M 60.5,91.5 h 128 M 60.5,66.5 h 102.4 M 60.5,40.5 h 76.8 M 60.5,15.5 h 51.2 M 111.5,15.5 L 469.5,373.5'/>    <g transform='translate(60,476)' stroke-width='4' stroke-linejoin='round' stroke='#FF4411'  fill='#FF4411'>   <use xlink:href='#lines'/>  </g>     <g transform='translate(60,476) scale(0.5125)' >   <use xlink:href='#labels' stroke='none'/>  </g>    <g font-family='Times, serif' font-size='10'>   <g fill='#6622cc'>    <g text-anchor='middle'>     <text x='240' y='505' font-size='30' font-style='italic'>x</text>    </g>    <g text-anchor='end'>     <text x='40' y='251.4' font-size='30' font-style='italic'>y</text>    </g>   </g>  </g>  </svg> ";

   let newBWsvg = setSVGtoBW(placeholder);
   container.innerHTML = newBWsvg;

CODEPEN

I set this up at CodePen here: https://codepen.io/myndex/pen/rNzZWWB

Notice the regex:

let rex = /#([0-9a-f]{1,2})([0-9a-f]{1,2})([0-9a-f]{1,2})/ig;

We are explicit about 0-9a-f instead of \w, because we no not want to replace ID calls references like <use '#newLines'> which could become <use '#000000es'> if we used (\w\w).

Greyscale

Also, you could now make this a greyscale converter, instead of black and white, by replacing the luminance color flipper return (Ys > 0.4) ? "#ffffff" : "#000000"; with instead a Y to sRGB conversion:

    
    let sRGBgr = ((Math.pow(Ys,1/2.2)*255)&0xff).toString(16).padStart(2,'0'); 
     
    return "#" + sRGBgr + sRGBgr + sRGBgr

This converts the Y back to an sRGB value, and concatenates it to an sRGB hex. The codepen for this greyscale version is https://codepen.io/myndex/pen/mdMGmVw

Regex round all RGB instances to nearest monochrome, example: `... fill="rgb(252,252,253)" ...` => `... fill="rgb(255,255,255)" ...`

1 Answers1

Short answer

Longer Answer

CODEPEN

Greyscale