转义HTML值的含义是什么？

Question

Handlebars会对{{expression}}返回的值进行HTML转义。如果你不想进行转义，可以使用三个大括号 {{{。什么是HTML转义？

- Peeper

---

它将显示在您的HTML页面中，就像您使用了<pre>code</pre>属性一样。 - Adriano

看看他们的文档http://handlebarsjs.com/#html-escaping，在两种情况下都有示例解释。 - Arun Gopinathan

Answer 1

以下字符在 HTML 中是保留字符，必须替换为对应的 HTML 实体： ~(在线 HTML 格式化器)

• " 被替换为 "
• & 被替换为 &
• < 被替换为 <
• > 被替换为 >

例子胜过千言万语：

var source   = $("#template").html(); 
var template = Handlebars.compile(source); 

var data = {
  escaped   : '{{}}',
  notescaped: '{{{}}}',
  html      : "<a href='https://google.com/'>Google <strong>Search</strong></a>",
}

$('body').append(template(data));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
<script id="template" type="text/x-handlebars-template">

<h4>Escaped HTML double curly brackets: <code>{{escaped}}</code></h4>
{{html}}
<p>It's just non interactive string</p>

<hr>

<h4>Not escaped HTML tripple curly brackets: <code>{{notescaped}}</code></h4>
{{{html}}}

<p>It basically ends up as parsed HTML</p>




</script>

然后，关于这个问题，handlebarsjs.com上的内容也是很好的阅读材料。

- wscourge

Answer 2

如果你的表达式中有像 <br> 这样的字符串，使用两个大括号({{ expression }}) 会将 <br> 转换为 HTML 换行元素。

但是如果你使用三个大括号({{{ expression }}})，那么 <br> 将会按照原样打印，而不会被转换为 HTML 元素。

- bwalshy

---

实际上是相反的：{{ expression }} 转义值，而 {{{ expression }}} 不转义。 - Jamie Ridding

Answer 3

根据他们的文档：

如果您查看h1标签，则<p>标签被转义，因此它显示为<p>；

如果您查看body标签，由于{{{}}}，字符串将以其原样显示。第一个<p>标签和最后一个</p>关闭标签未被转义。

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{{body}}}
  </div>
</div>

标题和正文的值如下

{
  title: "All about <p> Tags",
  body: "<p>This is a post about &lt;p&gt; tags</p>"
}

结果如下：

<div class="entry">
  <h1>All About &lt;p&gt; Tags</h1>
  <div class="body">
    <p>This is a post about &lt;p&gt; tags</p>
  </div>
</div>

- Arun Gopinathan