Renderizar uma variável como HTML em EJS

97

Estou usando a biblioteca de formulários para Node.js ( formulários ), que renderizará um formulário para mim no back-end da seguinte forma:

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();

A linha final var signup_var signup_form_as_html = signup_form.toHTML();cria um bloco de HTML que se parece com:

<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>

Basicamente, apenas uma longa sequência de HTML. Em seguida, tento renderizá-lo usando EJS e Express usando o seguinte código:

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

Mas, na renderização, o HTML é simplesmente a string que postei acima, em vez do HTML real (e, portanto, um formulário como eu quero). Existe alguma maneira de fazer com que essa string seja renderizada como HTML real usando EJS? Ou terei que usar algo como Jade?

node.js express ejs MrJaeger
fonte

Respostas:

293

Com o EJS, você pode ter várias tags:

<% code %>

... que é o código que é avaliado, mas não impresso.

<%= code %>

... que é o código que é avaliado e impresso (escapado).

<%- code %>

... que é o código que é avaliado e impresso (não escapado).

Como você deseja imprimir sua variável e NÃO escapar dela, seu código seria o último tipo (com o <%-). No seu caso:

<%- my_form_content %>

Para mais tags, consulte a documentação EJS completa

Jakub Oboza
fonte
7
adereços cara bravo que corrigiu meu problema instantaneamente
cbsm1 de
Passei horas tentando descobrir como fazer isso até encontrar este post. Muito obrigado !!!
Sam
Legal, você salvou meu dia.
Afshin Mehrabani
Estava usando o módulo exato solicitado aqui. Muita sorte :) Obrigado
majidarif
O que pode ser usado para escapar também do caractere "(vírgula invertida)?
Victor
15

Atualização de outubro de 2017

O desenvolvimento do novo ejs (v2, v2.5.7) está acontecendo aqui: https://github.com/mde/ejs O ejs antigo (v0.5.x, 0.8.5, v1.0.0) está disponível aqui https: / /github.com/tj/ejs

Agora, com ejs, você pode fazer ainda mais. Você pode usar:

  • Saída de <%= %>escape com (função de escape configurável)
  • Saída bruta sem escape com <%- %>
  • Modo de corte de nova linha ('slurping de nova linha') com -%>tag final
  • Modo de corte de espaço em branco (slurp todos os espaços em branco) para controlar o fluxo com <%_ _%>
  • Fluxo de controle com <% %>

Assim, no seu caso vai ser <%- variable %>onde variableé algo como

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

Espero que isso ajude alguém. 🙂

Pavel Kovalev
fonte
3

Tive o mesmo problema ao renderizar a entrada de textarea de um editor wysiwyg salvo como html em meu banco de dados. O navegador não irá renderizá-lo, mas exibirá o html como texto. Depois de horas de pesquisa, descobri

<%= data %> dados escapados enquanto

<%- data %>deixou os dados 'brutos' (sem escape) e o navegador agora pode renderizá-los.

Ufenei augustine
fonte