将JSON字符串中的所有`r,g,b`值替换为'hex'

问题描述 投票:-3回答:2
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
            }
          }
    ......
    ......
    }

在JS字符串中用十六进制替换所有rgb值的正确正则表达式和方法是什么?例如:

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

将变成:

"subobject2": "#040506"
javascript
2个回答
0
投票
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

0
投票

这不是一个很好的解决方案,但是它使用正则表达式替换rgb值。

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

如果您不熟悉正则表达式,这是一种解释:https://regex101.com/r/F8hQap/1

获得rgb值后,您可以解析它们并将其替换为十六进制值。我在这篇文章中使用了解决方案: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);
© www.soinside.com 2019 - 2024. All rights reserved.