web-dev-qa-db-fra.com

h: outputText ne divise pas les caractères \ r \ n en nouvelles lignes

J'ai du texte dans une variable String qui contient des retours à la ligne et de nouvelles lignes \r\n.

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

Je le présente en utilisant un <h:outputtext>.

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

Mais il ne reconnaît pas les caractères de la nouvelle ligne et s’affiche comme ci-dessous dans le navigateur Web.

Texte1 Texte2 Texte3

Pourquoi le <h:outputText> pas casser \n dans de nouvelles lignes?

Que devrais-je faire? Dois-je remplacer \n avec <br />?

jsfoutputline-breaks
48
Pellizon

Les sauts de ligne en HTML sont représentés par <br /> élément, pas par le \n personnage. Encore plus, ouvrez le code source HTML moyen en cliquant avec le bouton droit de la souris, Voir le code source dans le navigateur et vous "verrez" \n sur tous les lieux. Ils ne sont toutefois pas présentés comme tels dans la présentation HTML finale. Seulement le <br /> volonté.

Donc, oui, vous devez les remplacer par <br />.

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

Remarque: lorsque vous utilisez Apache EL au lieu d'Oracle EL, double-d'échappement de la barre oblique inversée, comme dans \\n.

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

Sinon, vous ferez face à une exception avec le message Failed to parse the expression with root cause org.Apache.el.parser.ParseException: Encountered <ILLEGAL_CHARACTER>.

Tout cela est cependant moche et le escape="false" le rend sensible à attaques XSS si la valeur provient de l’entrée utilisateur final et que vous ne le faites pas désinfecter avant. Une meilleure alternative est de continuer à utiliser \n et set CSS white-space _ propriété à préformaté sur l’élément parent. Si vous souhaitez insérer des lignes dans le contexte d'un élément de bloc, définissez pre-wrap. Ou si vous souhaitez également réduire les espaces et les tabulations, définissez pre-line.

Par exemple.

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

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

Ce comportement est normal: dans les espaces HTML consécutifs tels que les espaces et les sauts de ligne, le texte est normalisé et affiché sous la forme d'un seul espace. Vous obtiendrez le même affichage si vous incluez le texte avec des sauts de ligne directement dans la source HTML. Pour respecter les sauts de ligne dans la sortie, vous devez envelopper le texte dans les balises pre ou appliquer une classe de feuille de style:

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

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

Pour d'autres valeurs possibles pour le white-space _ attribut regardez cette page: http://www.w3schools.com/cssref/pr_text_white-space.asp

10
Jörn Horstmann

Les réponses précédentes me causaient des problèmes pour de grandes quantités de texte, comme une sortie extrêmement large (sans retour à la ligne), qui style="white-space: pre-wrap" n'a pas réparé; ou il vient d'afficher le &lt;br/&gt; sous forme de texte et non de fin de ligne.

Finalement, j'ai utilisé le h:inputTextarea composant pour afficher le texte et le rendre 'en lecture seule', ce qui a fonctionné directement sans remplacer les sauts de ligne, ni avoir à utiliser les styles supplémentaires ou stylesClasses. Et, il est redimensionnable pour répondre aux besoins de l'utilisateur, ce qui est un bonus.

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

Pour de petites quantités de texte, j'ai trouvé le pre-wrap possibilité, comme suggéré par henko ci-dessus, de bien fonctionner.

6
Robbie62