javascript - nodejs，玉转义标记

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 uses the bang to force unescaped output. So you turn regular output to unescaped output with the following construct: !=
If your content is inside an div tag you could do the following:

div!= content

Answer 2

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

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

所以，

div= varname

变成

div!= varname

---

和

div #{varname} is extrapolated badly

变成

div !{varname} is extrapolated perfectly

Answer 3

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

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

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

#foobar= varName

所以它变成：

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

如果您使用 bang 运算符：

#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'   );
}

然后在您的翡翠文件中使用“转义”过滤器：

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 模板中嵌入转义代码