Node.js读取HTML后替换{{ Text }}占位符失败，求解决方案

你的代码无效的核心原因是JavaScript字符串是不可变的：replace()方法不会修改原字符串，而是返回一个新的字符串，你之前没有将替换后的结果重新赋值，所以看不到变化。以下是两种场景的具体解决方法：

一、不使用模板引擎的实现 #

1. 同步读取文件（fs.readFileSync） #

直接将replace()的结果赋值回变量，即可得到修改后的HTML内容：

const fs = require('fs');
const filename = 'test.html';
const filePath = `/var/www/vhosts/example.com/httpdocs/html/${filename}`;

// 读取原始HTML
let htmlCode = fs.readFileSync(filePath, 'utf8');
// 执行替换并覆盖原变量
htmlCode = htmlCode.replace('{{ Text }}', 'new string');

// 后续使用修改后的htmlCode，比如返回给客户端或写入文件
// res.send(htmlCode);

如果需要替换所有匹配的{{ Text }}（比如页面中有多个相同占位符），改用带全局标志的正则表达式：

htmlCode = htmlCode.replace(/{{ Text }}/g, 'new string');

2. 异步读取文件（fs.readFile） #

异步读取的问题有两个：一是没接收replace()的返回值，二是fs.readFile本身不直接返回文件内容，必须在回调或Promise中处理结果：

回调版本

const fs = require('fs');
const filename = 'test.html';
const filePath = `/var/www/vhosts/example.com/httpdocs/html/${filename}`;

fs.readFile(filePath, 'utf8', (err, data) => {
  if (err) {
    console.error(err);
    res.send(`错误：${err.message}`);
    return;
  }
  // 替换得到新的HTML字符串
  const updatedHtml = data.replace('{{ Text }}', 'new string');
  // 这里处理结果，比如返回给客户端
  res.send(updatedHtml);
});

Promise版本（更简洁，推荐使用）

const fs = require('fs').promises;
const filename = 'test.html';
const filePath = `/var/www/vhosts/example.com/httpdocs/html/${filename}`;

async function processHtml() {
  try {
    const data = await fs.readFile(filePath, 'utf8');
    const updatedHtml = data.replace('{{ Text }}', 'new string');
    res.send(updatedHtml);
  } catch (err) {
    console.error(err);
    res.send(`错误：${err.message}`);
  }
}

processHtml();

二、使用Handlebars模板引擎的实现 #

如果想更规范地处理模板替换，用Handlebars会更方便：

1. 先安装依赖：

npm install handlebars

2. 编写代码：

const fs = require('fs').promises;
const handlebars = require('handlebars');
const filename = 'test.html';
const filePath = `/var/www/vhosts/example.com/httpdocs/html/${filename}`;

async function renderTemplate() {
  try {
    // 读取模板文件内容
    const templateSource = await fs.readFile(filePath, 'utf8');
    // 编译模板
    const template = handlebars.compile(templateSource);
    // 传入数据替换占位符（key要和模板中的{{ Text }}对应）
    const updatedHtml = template({ Text: 'new string' });
    res.send(updatedHtml);
  } catch (err) {
    console.error(err);
    res.send(`错误：${err.message}`);
  }
}

renderTemplate();

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