Node.js中readFileSync读取card.html后占位符未替换问题求助

一、先修正代码里的明显错误 #

1. 替换卡片HTML时误用字符串字面量
   你当前代码里的这一行：

   const output = ProductPage.replace("{%PRODUCT_CARDS%}", "cardsHtml");
   

   这里的"cardsHtml"是字符串文本，不是你生成的cardsHtml变量，要去掉引号，改成：

   const output = ProductPage.replace("{%PRODUCT_CARDS%}", cardsHtml);
   

2. 路由模板匹配可能有误
   当前路径是/overview，但你用的是ProductPage模板做替换，大概率是笔误，应该换成overview模板：

   const output = overview.replace("{%PRODUCT_CARDS%}", cardsHtml);
   

二、检查replaceItems.js模块的实现逻辑 #

这是占位符不替换的核心排查点，确保模块代码能正确完成替换：
正确的replaceItems.js应该类似这样，注意全局替换和字段匹配：

module.exports = (template, product) => {
  // 用正则加g标志做全局替换，避免只替换第一个匹配项
  let result = template.replace(/{%PRODUCTNAME%}/g, product.productName);
  result = result.replace(/{%SRC_LINK%}/g, product.srcLink);
  result = result.replace(/{%PRICE%}/g, product.price);
  // 必须返回替换后的字符串，否则调用后拿到undefined
  return result;
};

额外注意：

• 占位符名称要和data.json里的字段完全对应（比如data里的字段是productName还是PRODUCTNAME，要和replace逻辑里的键名一致）
• 确保所有模板里的占位符都在模块里做了替换处理

三、验证数据结构匹配 #

检查data.json的字段是否和占位符对应，比如结构应该类似：

[
  {
    "productName": "北欧双人床",
    "srcLink": "/images/bed1.jpg",
    "price": 1299
  },
  {
    "productName": "简约单人床",
    "srcLink": "/images/bed2.jpg",
    "price": 799
  }
]

四、调试方法 #

在替换后加日志，直接查看替换结果：

const cardsHtml = data_Dat.map((el) => {
  const replacedCard = replaceItem(cardPage, el);
  console.log(replacedCard); // 打印替换后的卡片HTML，看占位符是否被替换
  return replacedCard;
}).join("");

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