質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

6908閲覧

【handlebars.js】出力に改行を入れたい

nnahito

総合スコア2004

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2016/03/14 03:07

質問概要

handlebars.jsの出力結果に「改行」を出力したい。
(json中に「<br>」を入れても、出力は文字列で「<br>」と表示されてしまう)

環境

handlebars.jsのバージョン4.0.5を利用しています。

前提

初めてテンプレートエンジンを利用し始めました。
まだわからないことだらけです。

質問詳細

handlebars.jsのバージョン4.0.5を利用していますが、
json中にHTMLの改行コードである「<br>」を入れ、文章を作成し、
handlebarsでコンパイル、表示を行ったところ、そのまま「<br>」という文字列が表示され、改行されぬまま一行で文章が表示されていました。

こういったテンプレートエンジンで、改行を表示させることは可能なのでしょうか。
ご存じの方がいらっしゃいましたら、お知恵をお貸しください。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

brではなく、改行表記の\nを使ってみてはいかがでしょうか?

投稿2016/03/14 03:22

yamato_hikawa

総合スコア2092

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nnahito

2016/03/14 03:34

ご回答有り難うございます。 \nですと、半角スペースのような空白が表示されるだけでした…
nnahito

2016/03/14 11:54

コメントありがとうございます。 拝見したところ、Handlebars.registerHelperを使っていますが、 こちらを定義して処理していく、と言う流れになるのでしょうか?
guest

0

僕も質問者さんと同じようにエスケープするためにテンプレート側では「{{}}」で出力したいけれど改行の<br>だけは残したいという状況になって、handlebarsのhelper関数を定義して対処しました。

以下のようなコードです。

html

1<!-- helper関数escapeHtmlWithoutBrを呼び出す。textがテンプレートに渡されるデータ。 --> 2<p>{{#escapeHtmlWithoutBr text}}{{/escapeHtmlWithoutBr}}</p>

javascript

1Handlebars.registerHelper('escapeHtmlWithoutBr', function(text) { 2 var escapedText = text.replace(/(\r\n|\n|\r)/gm, '<br>').split('<br>').map(function(item) { 3 return item.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;'); 4 }).join('<br>'); 5 6 return escapedText; 7});

かなり無理矢理ですが、これで<br>以外のHTMLエスケープをした文字列を吐き出すことができるので、改行の表示ができます。

投稿2016/03/16 07:37

編集2016/03/16 07:39
nabeliwo

総合スコア14

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nnahito

2016/03/16 09:26

ご回答有り難うございます. 私用で申し訳ありませんが,只今海外学会に参加しているため確認で来るマシンがありません. 申し訳ありませんが,帰国後確認させていただきます! ご回答有り難うございます!!
guest

0

ベストアンサー

handlebarsのドキュメントをよくお読みください。

ドキュメントというか、Handlebarsのサイトのトップページにきちんと記載されています。
ただ、その一言だと可愛そうですので、以下回答です。

Handlebars HTML-escapes values returned by a {{expression}}. If you don't want Handlebars to escape a value, use the "triple-stash", {{{.

{{TEST}}

ではなく

{{{TEST}}

とするだけです。無論、中身はすべてエスケープされなくなりますので、他への影響の可能性ももちろん有ります。

投稿2016/03/17 01:21

ItoTomonori

総合スコア1283

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nnahito

2016/03/17 03:13

ご回答有り難うございます. まさかそんな方法があるとは思ってもいませんでした. 当方日本語以外が全く読めないため,日本の質問掲示板であるこちらに質問させていただいております. ご容赦ください
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問