Renderizar una variable como HTML en EJS

97

Estoy usando la biblioteca de formularios para Node.js ( Formularios ), que me representará un formulario en el backend de la siguiente manera:

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

La última línea var signup_var signup_form_as_html = signup_form.toHTML();crea un bloque de HTML que se ve así:

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

Básicamente, solo una larga cadena de HTML. Luego trato de renderizarlo usando EJS y Express usando el siguiente código:

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

Pero al renderizar, el HTML es simplemente la cadena que publiqué anteriormente, en lugar de HTML real (y, por lo tanto, un formulario como quiero). ¿Hay alguna forma de hacer que esa cadena se represente como HTML real usando EJS? ¿O tendré que usar algo como Jade?

node.js express ejs MrJaeger
fuente

Respuestas:

293

Con EJS puede tener varias etiquetas:

<% code %>

... que es un código que se evalúa pero no se imprime.

<%= code %>

... que es un código que se evalúa e imprime (escapa).

<%- code %>

... que es un código que se evalúa e imprime (no se escapa).

Dado que desea imprimir su variable y NO escapar de ella, su código sería el último tipo (con <%-). En tu caso:

<%- my_form_content %>

Para obtener más etiquetas, consulte la documentación completa de EJS

Jakub Oboza
fuente
7
puntales tipo bravo que fija mi problema al instante
cbsm1th
Solo pasé horas averiguando cómo hacer eso hasta que encontré esta publicación. Muchas gracias !!!
Sam
Bien, me salvaste el día.
Afshin Mehrabani
Estaba usando el módulo exacto que se pregunta aquí. Muy afortunado :) Gracias
majidarif
¿Qué se puede usar para escapar también del carácter "(coma invertida)?
Victor
15

Actualización de octubre de 2017

El nuevo desarrollo de ejs (v2, v2.5.7) está sucediendo aquí: https://github.com/mde/ejs El antiguo ejs (v0.5.x, 0.8.5, v1.0.0) está disponible aquí https: / /github.com/tj/ejs

Ahora con ejs puedes hacer aún más. Puedes usar:

  • Salida de <%= %>escape con (función de escape configurable)
  • Salida sin formato sin escape con <%- %>
  • Modo de recorte de nueva línea ('sorber de nueva línea') con -%>etiqueta final
  • Modo de recorte de espacios en blanco (sorber todos los espacios en blanco) para controlar el flujo con <%_ _%>
  • Control de flujo con <% %>

Entonces, en tu caso, será <%- variable %>donde variablehaya algo como

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

Espero que esto ayude a alguien. 🙂

Pavel Kovalev
fuente
3

Tuve el mismo problema con la representación de la entrada del área de texto desde un editor wysiwyg guardado como html en mi base de datos. El navegador no lo procesará, pero mostrará el html como texto. Después de horas de búsqueda, descubrí

<%= data %> datos escapados mientras

<%- data %>dejó los datos 'sin formato' (sin escape) y el navegador ahora podría representarlos.

Agustín Ufenei
fuente