web-dev-qa-db-ja.com

h：outputTextは\ r \ n文字を改行に分割しません

キャリッジリターンと改行\r\nを含むString変数にテキストがあります。

text = "Text1\r\nText2\r\nText3";

<h:outputtext>を使用して表示しています。

<h:outputText value="#{bean.text}" />

ただし、改行文字は認識されず、webbrowserに次のように表示されます。

テキスト1テキスト2テキスト3

<h:outputText>が\nを改行しないのはなぜですか？

私は何をすべきか？ \nを<br />に置き換える必要がありますか？

jsfoutputline-breaks
48
Pellizon

HTMLの改行は、<br />文字ではなく、\n要素で表されます。さらに、ブラウザで右クリックソースを表示して平均HTMLソースコードを開くと、すべての場所で\nが「表示」されます。ただし、最終的なHTMLプレゼンテーションではそのように表示されません。 <br />のみが対応します。

そのため、はい、それらを<br />に置き換える必要があります。

<h:outputText value="#{fn:replace(bean.text,'\n','&lt;br/&gt;')}" escape="false" />

注：Oracle ELの代わりにApache ELを使用する場合は、\\nのようにバックスラッシュをダブルエスケープしてください。

<h:outputText value="#{fn:replace(bean.text,'\\n','&lt;br/&gt;')}" escape="false" />

そうしないと、メッセージFailed to parse the expression with root cause org.Apache.el.parser.ParseException: Encountered <ILLEGAL_CHARACTER>で例外に直面します。

ただし、これはすべて見苦しく、escape="false"は、値がエンドユーザーの入力に由来し、事前に sanitize しない場合、 XSS攻撃 に敏感になります。より良い代替方法は、\nを使用し続け、 CSS white-space property を親要素で事前にフォーマット設定することです。ブロック要素のコンテキスト内で行をラップする場合は、pre-wrapを設定します。または、スペースとタブも折りたたむ場合は、pre-lineを設定します。

例えば。

<h:outputText value="#{bean.text}" styleClass="preformatted" />

.preformatted {
    white-space: pre-wrap;
}
104
BalusC

これは通常の動作です。HTMLでは、スペースや改行などの連続する空白は正規化されるため、単一のスペースとして表示されます。改行を含むテキストをHTMLソースに直接含めた場合、同じ表示になります。出力の改行を尊重するには、テキストをpreタグでラップするか、スタイルシートクラスを適用する必要があります。

<pre><h:outputText value="..."/></pre>

<div style="white-space: pre-wrap"><h:outputText value="..."/></div>

white-space属性のその他の可能な値については、このページを参照してください。 http://www.w3schools.com/cssref/pr_text_white-space.asp

10
Jörn Horstmann

以前の回答は、非常に幅の広い出力（テキストの折り返しなし）などの大量のテキストに対して問題を引き起こしましたが、style="white-space: pre-wrap"は修正しませんでした。または、&lt;br/&gt;を行末としてではなくテキストとして表示しただけです。

最後に、h:inputTextareaコンポーネントを使用してテキストを表示し、 '読み取り専用'にしました。これは、改行を置き換えずに余分なスタイルやstyleClassesを使用せずにすぐに機能しました。また、ユーザーのニーズに合わせてサイズ変更が可能です。これはボーナスです。

<h:inputTextarea cols="70" rows="10" readonly="true" value="#{bean.text}" />

少量のテキストの場合、上記のhenkoが提案したpre-wrapオプションがうまく機能することがわかりました。

6
Robbie62