Node.js，Jade转义标记

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>

- himakumar

Answer 1

Jade使用感叹号来强制输出未转义的内容。因此，您可以使用以下结构将常规输出转换为未转义的输出：!=
如果您的内容位于div标记内，则可以执行以下操作：

div!= content

- Daniel Baulig

---

这篇帖子询问如何避免HTML转义，而不是反转义。请看下面我的回答。 - Raine Revere

Answer 2

此外，这里还有另一个需要考虑的用例：

如果您正在使用 #{...} 来扩展 HTML 内容，仍然会得到错误的输出。对于这种情况，您需要使用 !{...} 替代方案。

因此，

div= varname

变成

div!= varname

而且

div #{varname} is extrapolated badly

变成

div !{varname} is extrapolated perfectly

- kumarharsh

Answer 3

实际上OP要求转义，而不是反转义。今天我也遇到了这个问题。

假设您有一个名为varName的变量，其中包含<b>FooBar</b>内容。

然后这个模板将使用转义后的值：

#foobar= varName

所以它变成了：

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

如果您使用感叹号操作符：

#foobar!= varName

jade不会转义它，所以它变成了:

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

- KARASZI István

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

- ewiggin

---

KISS ftw。不确定作者是否认为这是可能的，但这是最好的解决方案。 - DigitalDesignDj

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>

来源：在Jade模板中嵌入转义代码

- Raine Revere