Question

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

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

Answer 1

它不会自动执行，但使用帮助程序功能可以实现：

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>

Answer 2

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

例如，来自车把网站：

“Handlebars HTML-escapes {{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>

Answer 3

以下是我比目前接受的答案更喜欢的两种方法：

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

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

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

有关Blaze._escape

https://github.com/meteor/meteor/blob/devel/packages/blaze/preamble.js

Answer 4

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

但是我意识到当我注册帮助器时，它接收的函数参数不是文本，而是在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);
});

这是我能让它发挥作用的唯一方法。

Answer 5

任何使用三重缓存的解决方案都会打开您的应用程序进行XSS攻击，除非您实现了清理HTML的内容。

我建议使用<pre>标记，而不是创建自定义帮助程序。

Answer 6

对于像我这样遵循入门代码但不知道为什么没有HTML出现的其他人。

在handlebars expressions documentation中它说明

车把{{expression}}返回的HTML转义值。如果您不希望手把转义一个值，请使用“三重隐藏”，{{{

handlebars.js是否用替换换行符？

6 个答案: