2011-08-03 16 views
11

Tengo una aplicación Express que utiliza el motor de vista de Jade predeterminado. Cuando intento renderizar HTML tal como está en un elemento <pre>, se representa como elementos DOM reales en lugar de caracteres literales.nodejs, marcado de escape de jade

h1 Code Sample 
pre 
    code 
    <div>some text</div> 

Salida:

<h1>Code Sample</h1> 
<pre> 
    <code> 
    <div>some text</div> 
    </code> 
</pre> 

¿Cómo escapar el código HTML para que se representa como sigue?

<h1>Code Sample</h1> 
<pre> 
    <code> 
    &lt;div&gt;some text&lt;/div&gt; 
    </code> 
</pre> 

Respuesta

22

Jade utiliza la explosión para forzar la salida sin escape. Así que encienda salida normal a la salida sin escapar con la construcción siguiente: !=
Si su contenido es dentro de una etiqueta div que podría hacer lo siguiente:

div!= content 
+3

La publicación se pregunta cómo ** escaparse ** html, no unescape. Ver mi respuesta a continuación. –

8

En realidad el PO pide el escape, no el unescape. Con lo que me encontré hoy.

Supongamos que tiene varName variable con <b>FooBar</b> contenido.

A continuación, esta plantilla se utilice el valor escapado:

#foobar= varName 

por lo que se convierte en:

<div id="foobar">&lt;b&gt;FooBar&lt;/b&gt;</div> 

Si se utiliza el operador explosión:

#foobar!= varName 

jade voluntad no escapar por lo que se convierte en:

<div id="foobar"><b>FooBar</b></div> 
17

Como complemento, aquí es otro caso de uso, que debe tener en cuenta:

Si está extrapolando el contenido HTML utilizando el #{...}, se siguen dando la salida equivocada. Para ese caso de uso, necesita la alternativa !{...}.

Así,

div= varname 

convierte

div!= varname 

Y

div #{varname} is extrapolated badly 

convierte

div !{varname} is extrapolated perfectly 
+0

¿Qué quiere decir con "resultado incorrecto"? –

2

No está integrado en Jade, pero se puede hacer con un filtro :
(esto se puede añadir en cualquier lugar en la parte superior de app.js.)

require('jade').filters.escape = function(block) { 
    return block 
    .replace(/&/g, '&amp;' ) 
    .replace(/</g, '&lt;' ) 
    .replace(/>/g, '&gt;' ) 
    .replace(/"/g, '&quot;') 
    .replace(/#/g, '&#35;' ) 
    .replace(/\\/g, '\\\\' ) 
    .replace(/\n/g, '\\n' ); 
} 

continuación, utilizar el filtro de 'escapar' en su archivo de jade:

h1 Code Sample 
pre 
    code 
    :escape 
     <div>some text</div> 

Salida:

<h1>Code Sample</h1> 
<pre> 
    <code>&lt;div&gt;hi&lt;/div&gt;</code> 
</pre> 

Fuente: Embedding escaped code in a Jade template