用 JSON 字符串中的 hex 替换所有 r、g、b 值 [重复]

Posted 2023-02-23

【中文标题】用 JSON 字符串中的 hex 替换所有 r、g、b 值 [重复]

【英文标题】：Replace all `r, g, b` values with `hex` in JSON string [duplicate]

【发布时间】：2020-05-20 20:27:45

【问题描述】：

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 中用十六进制替换同一字符串对象中的所有 r、g、b 值的正确正则表达式和方法是什么？例如：

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

会变成：

"subobject2": "#040506"

【问题讨论】：

不要对字符串这样做。将 JSON 解析为对象，然后替换属性。

【参考方案1】：

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

【参考方案2】：

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

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

如果你不熟悉正则表达式，这里有一个解释：https://regex101.com/r/F8hQap/1

获得 rgb 值后，您可以将它们解析出来并替换为 hex 值。我在这篇文章中使用了解决方案：https://***.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);