nodejs，jade escape markup

Question

我有一个使用默认Jade视图引擎的Express应用程序。当我尝试在<pre>元素中按原样呈现HTML时，它会呈现为实际的DOM元素而不是文字字符。

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

输出：

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

如何转义HTML以使其呈现如下？

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

Answer 1

Jade使用爆炸强制未转义的输出。因此，您使用以下构造将常规输出转换为非转义输出：!=
如果您的内容位于div标签内，则可以执行以下操作：

div!= content

Answer 2

另外，这是另一个需要考虑的用例：

如果您使用#{...}推断HTML内容，它仍会提供错误的输出。 对于该用例，您需要!{...}替代方案。

所以，

div= varname

变为

div!= varname

---

和

div #{varname} is extrapolated badly

变为

div !{varname} is extrapolated perfectly

Answer 3

实际上OP要求逃避，而不是unescaping。我今天遇到了。

假设您拥有varName内容为<b>FooBar</b>的变量。

然后此模板将使用转义值：

#foobar= varName

所以它变成了：

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

如果您使用爆炸操作员：

#foobar!= varName

玉不会逃脱它，所以它变成了：

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

Answer 4

这是官方方式：

code= '<div>This code is' + ' <escaped>!</div>'
<code>&lt;div&gt;This code is &lt;escaped&gt;!&lt;/div&gt;</code>

http://jade-lang.com/reference/#unescapedbufferedcode

Answer 5

它不是内置于Jade，但你可以使用过滤器来实现：
（这可以添加到app.js顶部的任何位置。）

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

然后在jade文件中使用'escape'过滤器：

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

输出：

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

来源：Embedding escaped code in a Jade template