44

尝试使用 handlebars.js 进行模板化，但该库似乎忽略了换行符。

处理换行符的正确方法是什么？是否应该在模板操作之后手动替换它们？

4

6 回答 6

96

它不会自动这样做，但使用助手功能可以实现：

JS：

Handlebars.registerHelper('breaklines', function(text) {
    text = Handlebars.Utils.escapeExpression(text);
    text = text.replace(/(\r\n|\n|\r)/gm, '<br>');
    return new Handlebars.SafeString(text);
});

HTML 模板：

<div>
    {{breaklines description}}
</div>
于 2012-09-12T23:51:23.423 回答
29

通过插入三个大括号而不是传统的两个大括号，您可以指示把手停止其转义 html 表达式的常规技术，例如<br>and <p>;

例如，来自车把网站：

“Handlebars HTML 转义 a 返回的值{{expression}}。如果您不希望 Handlebars 转义值，请使用“triple-stash”，。{{{”

    <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>
于 2013-08-02T21:10:40.183 回答
12

与当前接受的答案相比，我更喜欢以下两种方法：

  1. 在要保留换行符的元素上使用white-space: pre-wrap;或（分别允许或抑制自然换行）。white-space: pre;如果您希望折叠空白序列，这是 HTML 中的文本通常呈现的方式，请使用white-space: pre-line;但请注意 IE8 及以下版本不支持此功能。https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

  2. 或者这里有一个不需要复制和粘贴外部代码的模板助手版本：

    Template.registerHelper('breaklines', function (text) {
  text = Blaze._escape(text);
  text = text.replace(/(\r\n|\n|\r)/gm, '<br>');
  return new Spacebars.SafeString(text);
});

    请参阅https://github.com/meteor/meteor/blob/devel/packages/blaze/preamble.js了解Blaze._escape

于 2015-11-08T13:46:08.647 回答
2

任何使用三重连接的解决方案都会使您的应用程序遭受 XSS 攻击，除非您实施某种措施来清理 HTML。

我建议使用<pre>标签而不是创建自定义助手。

于 2015-07-26T14:05:48.827 回答
1

我使用了@Uri 发布的代码，它非常有用。

但是我意识到，当我注册 helper 时，它接收的函数参数不是文本，而是在 Handlebars 模板中调用的函数。所以首先我必须调用它来获取文本。

为了澄清，我必须这样做：

Handlebars.registerHelper('breaklines', function(descriptionFunction) {
    text = descriptionFunction();
    text = Handlebars.Utils.escapeExpression(text);
    text = text.toString();
    text = text.replace(/(\r\n|\n|\r)/gm, '<br>');
    return new Handlebars.SafeString(text);
});

这是我让它工作的唯一方法。

于 2012-11-02T14:56:21.403 回答
0

对于像我这样遵循入门代码并且不知道为什么没有显示 HTML 的其他人。

在车把表达式文档中 它指出

Handlebars HTML 转义 {{expression}} 返回的值。如果您不希望 Handlebars 转义值，请使用“triple-stash”，{{{

于 2019-08-20T11:34:16.037 回答