Node.js使用fs.readFile加载HTML文件时如何传入header变量

DevOps 小满

2026-9-23

解决方案

步骤1：修改独立index.html文件，添加占位符

把原模板中变量插入的位置换成自定义占位符（推荐用{{变量名}}格式，避免语法冲突），index.html内容如下：

<html>
    </head>
        <body>
            <div class='modal'>
                <div class='header'>
                    {{header}}
                </div>
            </div>
        </body>
        </html>

步骤2：加载文件后替换占位符

读取到HTML文件内容后，用字符串替换方法把占位符替换为header变量的实际值即可：

const header = "Hello Header";
let result;
fs.readFile("index.html", 'utf8', function (err, data) {
    if (err) throw err; // 增加读取错误处理，避免程序异常崩溃
    // 全局替换所有匹配的占位符
    result = data.replace(/{{header}}/g, header);
});

可选优化：多变量批量替换

如果后续有多个变量需要传入模板，可以统一用对象管理变量，批量替换：

// 所有需要传入模板的变量统一管理
const tplVars = {
    header: "Hello Header",
    // 可扩展其他变量
    // pageTitle: "我的页面",
    // content: "主体内容"
};
let result;
fs.readFile("index.html", 'utf8', function (err, data) {
    if (err) throw err;
    result = data;
    Object.keys(tplVars).forEach(varName => {
        const matchReg = new RegExp(`{{${varName}}}`, 'g');
        result = result.replace(matchReg, tplVars[varName]);
    });
});