React中如何替换并更新manifest.json的JSON内容

通过GitHub API获取manifest.json内容后，我需要修改其中的icons数组：移除原有的favicon.ico条目，新增maskable.png、logo256.png、logo348.png三个图标条目。尝试用string.replace方法替换字符串，但没有生效。

旧的manifest.json内容 #

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

期望更新后的内容 #

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "maskable.png",
      "sizes": "280x280",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "logo192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "logo256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "logo348.png",
      "sizes": "348x348",
      "type": "image/png"
    },
    {
      "src": "logo512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

尝试的无效代码 #

let newContent = oldContent.replace(`{"src": "favicon.ico","sizes": "64x64 32x32 24x24 16x16","type": "image/x-icon"},`,  
`{"src": "logo256.png","sizes": "256x256","type": "image/png"},{"src": "logo348.png","sizes": "348x348",         "type": "image/png"},`);

解决方案 #

直接操作JSON字符串容易因为格式差异（比如空格、换行、键的顺序）导致匹配失败，正确做法是将JSON解析为JavaScript对象，修改数据结构后再转回JSON字符串：

// 假设oldContent是从GitHub API获取的JSON字符串
const manifest = JSON.parse(oldContent);

// 重构icons数组：添加新的maskable图标，保留原有非favicon条目，再新增两个图标
manifest.icons = [
  {
    "src": "maskable.png",
    "sizes": "280x280",
    "type": "image/png",
    "purpose": "any maskable"
  },
  // 过滤掉favicon.ico条目，保留其他原有图标
  ...manifest.icons.filter(icon => icon.src !== "favicon.ico"),
  // 添加新的图标条目
  {
    "src": "logo256.png",
    "sizes": "256x256",
    "type": "image/png"
  },
  {
    "src": "logo348.png",
    "sizes": "348x348",
    "type": "image/png"
  }
];

// 将修改后的对象转回格式化的JSON字符串（缩进2空格，和原格式一致）
const newContent = JSON.stringify(manifest, null, 2);

这种方法不依赖原JSON的具体格式，直接操作数据结构，稳定性和可维护性更强。filter方法精准移除不需要的条目，扩展运算符保留原有有效内容，最后通过JSON.stringify生成符合格式要求的字符串。

内容的提问来源于stack exchange，提问作者user19672461