在 EJS 中將變量渲染為 HTML

Question

我正在為 Node.js ( Forms ) 使用 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 這樣的東西嗎？

Answer 1

使用 EJS，您可以擁有多個標簽：

    <% code %>

...這是已評估但未打印出來的代碼。

    <%= code %>

...這是評估和打印出（轉義）的代碼。

    <%- code %>

...這是評估和打印出（未轉義）的代碼。

由於您想打印變量而不是對其進行轉義，因此您的代碼將是最后一種類型（帶有<%- ）。 在你的情況下：

    <%- my_form_content %>

有關更多標簽，請參閱完整的 EJS 文檔

Answer 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，您可以做更多事情。 您可以使用：

• 使用<%= %>轉義輸出（轉義函數可配置）
• 使用<%- %>轉義的原始輸出
• 帶有-%>結束標記的換行修剪模式（'換行啜飲'）
• 使用<%_ _%>控制流的空白修剪模式（吞掉所有空白）
• 使用<% %>控制流

因此，在您的情況下，它將是<%- variable %> ，其中variable類似於

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

我希望這可以幫助別人。 🙂

Answer 3

我在渲染來自所見即所得編輯器的 textarea 輸入時遇到了同樣的問題，該編輯器在我的數據庫中保存為 html。 瀏覽器不會呈現它，而是將 html 顯示為文本。 經過幾個小時的搜索，我發現

<%= data %>轉義數據而

<%- data %>留下數據“原始”（未轉義），瀏覽器現在可以呈現它。

Answer 4

根據 ejs文檔

<% 'Scriptlet' 標簽，用於控制流，無 output

<%_ 'Whitespace Slurping' Scriptlet 標簽，去掉它前面的所有空格

<%= 將值輸出到模板中（HTML 轉義）

<%- 將未轉義的值輸出到模板中

<%# 注釋標簽，不執行，沒有 output

<%% 輸出文字 '<%'

%> 普通結束標簽

-%> Trim-mode ('newline slurp') 標簽，在換行之后修剪

_%> 'Whitespace Slurping' 結束標簽，刪除它后面的所有空格