嘿，我来帮你搞定这个JSON.parse报错的麻烦！咱们先理清楚问题出在哪，再一步步解决：

问题根源 #

你遇到的"不是有效的JSON报错，本质是模板引擎的自动HTML转义搞的鬼：

• 当你用#{JSON.stringify(locals.flashes)}把闪存消息转成JSON字符串嵌入模板时，模板引擎（看起来像是Pug）会自动把HTML特殊字符转义——比如把双引号"转成"，把&转成&，最后就生成了{"info":[...]}这种双重转义的字符串。
• 前端用JSON.parse解析时，根本认不出"这种格式，自然就报错了。

快速解决方法 #

针对Pug模板（你代码里的script.语法是Pug的写法），只需要把模板里的插值语法从#{}改成!{}，禁用自动转义：

if Object.keys(locals.flashes).length !== 0
  script.
    const flashArr = !{JSON.stringify(locals.flashes)};
    // 现在你可以正常使用这个对象，不需要额外JSON.parse了

!{}会直接输出JSON字符串的原始内容，不会转义任何字符，这样前端拿到的就是标准的JSON格式，比如{"info":["Image has been added"],"success":["No success Sorry!"]}，自然能被正确识别。

额外安全提示（可选） #

如果你的闪存消息里可能包含HTML特殊字符（比如<、>、"），直接禁用转义可能有XSS风险。这时候可以先在后端对消息内容进行HTML转义，再生成JSON：

// 在Express的中间件里处理flash消息
app.use((req, res, next) => {
  // 初始化locals.flashes
  res.locals.flashes = {};
  // 遍历所有flash类型
  Object.keys(req.flash()).forEach(key => {
    res.locals.flashes[key] = req.flash(key).map(msg => {
      // 转义HTML特殊字符
      return msg
        .replace(/&/g, '&')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;');
    });
  });
  next();
});

之后模板里还是用!{JSON.stringify(locals.flashes)}，这样既保证了JSON结构的正确性，又能安全地把消息插入DOM。

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