web-dev-qa-db-ja.com

handlebars.jsは改行文字を<br>に置き換えますか？

テンプレートにhandlebars.jsを使用しようとしていますが、ライブラリは改行を無視しているようです。

改行を処理する正しい方法は何ですか？テンプレートアクション後に手動で置き換える必要がありますか？

handlebars.jsclient-side-templating
36
Uri

これは自動的には行われませんが、ヘルパー機能を使用するとこれを実現できます。

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>
83
Uri

従来の2つではなく3つのブレースを挿入することで、ハンドルバーに<br>や<p>などのhtml式をエスケープする通常の手法を停止するように指示できます。

たとえば、ハンドルバーのWebサイトから：

「{{expression}}によって返される値をHTMLエスケープするハンドルバー。ハンドルバーに値をエスケープさせたくない場合は、 "トリプルスタッシュ"、{{{を使用します。 "

    <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>
27
Douglas Adam Smith II

現在受け入れられている答えよりも私が好む2つのアプローチがあります：

  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.jsBlaze._escapeを参照してください

10
Matt Jenkins

トリプルステーチを使用するソリューションは、HTMLをサニタイズするための何かを実装しない限り、アプリケーションをXSS攻撃にさらします。

カスタムヘルパーを作成するのではなく、<pre>タグを使用することをお勧めします。

1
ryanw51

@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);
});

これは私がそれを機能させることができる唯一の方法です。

1
eze.scaruli

私のような他の人にとっては、Getting Startコードに従っていて、HTMLが表示されなかった理由を知りませんでした。

in handlebars expression documentation それは述べています

Handlebarsは、{{expression}}によって返されるHTMLエスケープ値です。 Handlebarに値をエスケープさせたくない場合は、「トリプルスタッシュ」、{{{

0
Nagy Wesley