Replace all `r, g, b` values with `hex` in JSON string

Question

const jsonString = JSON.stringify(myJson, null, 2);

 {
      "object1": {
        "subobject1": {
          "r": 0,
          "g": 0,
          "b": 0
        },
        "someOtherProperty": 1
      },
      "allColors": {
        "object2": [
          {
            "subobject2": {
              "r": 4,
              "g": 5,
              "b": 6
            },
            "subobject3": {
              "r": 7,
              "g": 8,
              "b": 9
            },
            "subobject4": {
              "r": 9,
              "g": 10,
              "b": 11
            }
          }
    ......
    ......
    }

What is the correct regex and way in JS to replace all r, g, b values with hex inside the same string object? For example:

   "subobject2": {
      "r": 4,
      "g": 5,
      "b": 6
    }

would turn into:

"subobject2": "#040506"

Don't do it to the string. Parse the JSON to objects, and then replace the properties. — Barmar, Feb 05 '20 at 00:01

score 1 · Answer 1 · answered Feb 05 '20 at 00:05

var rgb = {
  "red": 32,
  "green": 38,
  "blue": 46
}

function tohex(color) {
  function tohex2(dec) {
    hex = Math.max(0, Math.min(255, dec)).toString(16);
    if (hex.length == 1) hex = "0" + hex;
    return hex;
  }
  return "#" + tohex2(color["red"]) + tohex2(color["green"]) + tohex2(color["blue"]);
}

rgb = tohex(rgb);

// rgb = #20262e

score 0 · Answer 2 · answered Feb 05 '20 at 00:20

This is not a pretty solution, but it uses regex to replace the rgb values.

/({\n*\s*"r": \w+,\n*\s*"g": \w+,\n*\s*"b": \w+\n*\s*})/gi

If you're unfamiliar with regex, here is an explanation: https://regex101.com/r/F8hQap/1

After you obtained the rgb values, you can parse them out and replace them with the hex values. I've used the solution in this post: https://stackoverflow.com/a/5624139/2958996

var jsonString = '{\n' +
    '      "object1": {\n' +
    '        "subobject1": {\n' +
    '          "r": 0,\n' +
    '          "g": 0,\n' +
    '          "b": 0\n' +
    '        },\n' +
    '        "someOtherProperty": 1\n' +
    '      },\n' +
    '      "allColors": {\n' +
    '        "object2": [\n' +
    '          {\n' +
    '            "subobject2": {\n' +
    '              "r": 4,\n' +
    '              "g": 5,\n' +
    '              "b": 6\n' +
    '            },\n' +
    '            "subobject3": {\n' +
    '              "r": 7,\n' +
    '              "g": 8,\n' +
    '              "b": 9\n' +
    '            },\n' +
    '            "subobject4": {\n' +
    '              "r": 9,\n' +
    '              "g": 10,\n' +
    '              "b": 11\n' +
    '            }\n' +
    '          }\n' +
    '    \n' +
    '    }\n' +
    '}'
function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

function replacer(string) {
  rgbValues = JSON.parse(string);
  console.log(rgbValues);
  return '"' + rgbToHex(rgbValues['r'], rgbValues['g'], rgbValues['b']) + '"';
}
var newString = jsonString.replace(/({\n*\s*"r": \w+,\n*\s*"g": \w+,\n*\s*"b": \w+\n*\s*})/gi, replacer);
console.log(newString);

Replace all `r, g, b` values with `hex` in JSON string

2 Answers2