如何使用EJS将Node.js后端变量渲染到HTML表单input标签中

后端传值配置 #

首先要在路由渲染EJS模板的环节，把加密得到的encrypted_word变量传入模板，以Express框架为例，参考代码如下：

// 对应提交接口的路由处理逻辑
app.post('/process', (req, res) => {
  const userInput = req.body.user_word;
  // 这里是你已有的加密处理逻辑
  var encrypted_word = yourEncryptMethod(userInput);
  // 渲染目标EJS模板时传入变量，注意key名要和模板内调用的变量名保持一致
  res.render('result-page', {
    encrypted_word: encrypted_word
  });
});

模板端input正确写法 #

直接在目标input标签上添加value属性，用<%=标签输出变量即可，必须给value属性加双引号包裹，代码如下：

<input type="text" name="encrypted_word" value="<%= encrypted_word %>">

常见踩坑说明 #

• 不要漏传模板变量：如果res.render时没有传入encrypted_word，EJS会抛出变量未定义错误，最终input会显示为空。
• 不要使用<%-标签做输出：<%-是无转义的原始内容输出，放在HTML属性位置会引入XSS安全风险；<%=自带HTML特殊字符转义能力，刚好适配属性值输出场景，不需要额外做转义处理。
• 不要省略value属性的外层双引号：如果加密结果包含空格、引号类特殊字符，不加外层引号会导致值被截断，显示内容不完整。
• 如果遇到值不显示的问题，可以先在模板中临时写入<% console.log(encrypted_word) %>，查看服务端控制台输出，确认变量本身值正常、确实传递到了模板。

内容的提问来源于stack exchange，提问作者Yolo-cell-hash