如何在Node.js中向服务端HTML传递变量（不使用外部模块）

我来帮你搞定这个变量传递的问题！首先得明确：服务端的Node.js环境和客户端的浏览器JS环境是完全独立的，你现在的代码只是直接返回了原HTML文件，客户端脚本里的tmp和服务端定义的tmp根本不是一回事，所以自然取不到值。

问题根源 #

服务端的变量不会自动“渗透”到客户端，必须在返回HTML内容之前，把服务端的变量值主动插入到HTML的对应位置，让客户端收到的是已经填充好变量的HTML代码。

解决方案：字符串替换注入变量 #

我们可以通过读取HTML文件后，用服务端的变量值替换HTML里的占位符，再把处理后的HTML返回给客户端。不需要任何外部模块，纯Node.js内置模块就能实现。

步骤1：修改HTML文件（添加占位符）

把客户端脚本里的tmp换成一个明确的占位符，这样替换的时候不会误改其他内容：

<script type="text/javascript">
  console.log('{{tmp}}'); // 用{{tmp}}作为占位符
</script>

步骤2：修改Node.js服务端代码

读取HTML文件后，将Buffer转换为字符串，替换占位符为服务端变量值，再返回给客户端：

const http = require('http');
const fs = require('fs');

// 创建HTTP服务器
const server = http.createServer((req, res) => {
  fs.readFile('./index.html', (err, htmlBuffer) => {
    if (err) {
      res.statusCode = 404;
      res.end('Error! File not found');
      return;
    }

    // 定义服务端变量
    const tmp = "lol!";
    // 将Buffer转为字符串，替换占位符
    const processedHtml = htmlBuffer.toString().replace('{{tmp}}', tmp);

    // 设置响应头并返回处理后的HTML
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(processedHtml);
    res.end();
  });
});

// 启动服务器
server.listen(3000, () => {
  console.log('Server running at http://localhost:3000/');
});

效果说明 #

当客户端请求页面时，服务端会返回已经替换好的HTML代码：

<script type="text/javascript">
  console.log('lol!');
</script>

客户端运行这段脚本时，就能正确输出lol!了。

可选优化：如果不想用占位符 #

如果你不想额外加占位符，也可以直接替换HTML里的tmp变量，但要注意避免误替换：
比如HTML保持你原来的写法：

<script type="text/javascript">
  console.log(tmp);
</script>

然后服务端代码里替换成：

const processedHtml = htmlBuffer.toString().replace('tmp', `"${tmp}"`);

这样客户端收到的就是console.log("lol!")，也能正常运行。不过这种方式风险稍高，如果HTML里还有其他地方出现tmp字符串，会被一起替换，所以更推荐用占位符的方式。

内容的提问来源于stack exchange，提问作者Oh Wan Sik