在 EJS 中将变量呈现为 HTML

Posted 2023-03-03

【中文标题】在 EJS 中将变量呈现为 HTML

【英文标题】：Render a variable as HTML in EJS

【发布时间】：2012-05-06 19:17:33

【问题描述】：

我正在使用 Node.js (Forms) 的表单库，它将在后端为我呈现一个表单：

var signup_form = forms.create(
    username: fields.string(required: true)
    , password: fields.password(required: true)
    , confirm:  fields.password(
        required: true
        , validators: [validators.matchField('password')]
    )
    , email: fields.email()
);
var signup_form_as_html = signup_form.toHTML();

最后一行 var signup_var signup_form_as_html = signup_form.toHTML(); 创建一个 HTML 块，如下所示：

<div class="field required"><label for="id_username">Username</label><input type="text" name="username" id="id_username" /></div><div class="field required"><label for="id_password">Password</label><input type="password" name="password" id="id_password" /></div><div class="field required"><label for="id_confirm">Confirm</label><input type="password" name="confirm" id="id_confirm" /></div><div class="field"><label for="id_email">Email</label><input type="text" name="email" id="id_email" /></div>

基本上只是一长串 HTML。然后我尝试使用 EJS 和 Express 使用以下代码呈现它：

res.render('signup.ejs', 
    session: loginStatus(req)
    , form: signup_form_as_html
);

但在呈现 HTML 时，它只是我在上面发布的字符串，而不是实际的 HTML（因此是我想要的表单）。有没有办法使用 EJS 使该字符串呈现为实际的 HTML？还是我必须使用 Jade 之类的东西？

【参考方案1】：

使用 EJS，您可以拥有多个标签：

    <% code %>

...这是评估但未打印出来的代码。

    <%= code %>

...这是被评估和打印出来（转义）的代码。

    <%- code %>

...这是被评估和打印出来的代码（未转义）。

由于您想打印变量而不是对其进行转义，因此您的代码将是最后一种类型（使用<%-）。在你的情况下：

    <%- my_form_content %>

更多标签，见full EJS documentation

【讨论】：

道具老兄，它立即解决了我的问题

只是花了几个小时弄清楚如何做到这一点，直到我找到了这篇文章。非常感谢！！！

很好，你拯救了我的一天。

正在使用此处询问的确切模块。太幸运了：）谢谢

什么可以用来转义"（反逗号）字符？

【参考方案2】：

2017 年 10 月更新

新的 ejs（v2、v2.5.7）开发正在这里进行：https://github.com/mde/ejs 旧的 ejs (v0.5.x, 0.8.5, v1.0.0) 可以在这里找到https://github.com/tj/ejs

现在有了 ejs，你可以做得更多。您可以使用：

<%= %> 转义输出（转义功能可配置） <%- %> 未转义的原始输出 带有-%> 结束标记的换行修剪模式（'newline slurping'） 使用<%_ _%> 控制流的空白修剪模式（啜食所有空白） <% %> 的控制流

因此，在您的情况下，它将是 <%- variable %>，其中 variable 类似于

var variable = "text here <br> and some more text here";

我希望这对某人有所帮助。 ?

【参考方案3】：

我在从所见即所得编辑器渲染文本区域输入时遇到了同样的问题，该编辑器在我的数据库中保存为 html。浏览器不会呈现它，而是将 html 显示为文本。经过几个小时的搜索，我发现了

<%= data %> 转义数据而

<%- data %>left data 'raw'（未转义），浏览器现在可以渲染它。