VisualForce: convert carriage returns to html line-breaks in a long text field

Question

In Salesforce, if I'm binding a text field into a VisualForce page, whats a good way to convert the carriage returns in the text-field into HTML <br/> tags?

e.g. starting from something like this:

<apex:page standardController="Case">
  <apex:pageBlock title="Test">
      <p>{!case.Description}</p>
  </apex:pageBlock>                   
  <apex:detail relatedList="false" />
</apex:page>   

... if the Description is long with lots of carriage returns, how do I HTML-ify it?

(I guess this is a fairly easy question, and I'm sure I could google it, but to get the Salesforce community going on here I figure we need a few easy questions.)

edit: (Bounty added to try and generate some excitement)

Answer 1

Try this:

<apex:outputField value="{!case.Description}"/>

Using output fields will maintain formatting automagically.

Answer 2

I eventually achieved this with some long winded code.

In the custom controller, add methods to return the field after manually searching and replace the line breaks in the field and replacing them with <br/> tags:

public string getCaseDescriptionFormatted()
{
    Case c = this.loadCaseFromDatabaseOrWhatever();
    return lineBreaks(c.Description);   
}

private string lineBreaks(string inText)
{
   if (inText == null)
       return '';
   else
       return inText.replaceAll('<','(').replaceAll('>',')').replaceAll('\n','<br/>');
}

Then in the page, use apex:outputText with escape="false":

<apex:outputText value="{!CaseDescriptionFormatted}" escape="false" />

Note that escape="false" is necessary to prevent VisualForce from escaping the html tags. This also means you leave yourself open to scripting-attacks that could by hypothetically embedded in the data. Thats why the lineBreaks() fn in the controller also replaces any < and > characters.

(There may be a better way to make the string safe, suggestions welcome)

Answer 3

TehNrd above answered the question for me.

I am developing a tabbed view of Cases similar to the common example for Accounts. When it comes to showing the case comments you can not just put them into a related list and instead you need to format them by hand. Using the standard apex pageBlockTable results in a tightly packed table that can not be read by users so we have to do more hand coding. This approach also allows me to use CSS to format the table contents. But the problem was formatting the Case Comments with line breaks and email messages formatted. TehNrd's answer worked perfectly!

For others here is the code to display a tab with formatted CaseComment along with an action to edit the comment.

<apex:tab label="Comments" name="Comments" id="tabComments">
    <apex:form >
        <apex:pageBlock id="commentsPageBlock">
            <apex:pageBlockButtons location="top">
                <apex:commandButton value="Toggle Sort" action="{!RequeryComments}" id="theButton" rerender="commentsPageBlock"></apex:commandButton>
            </apex:pageBlockButtons>
            <table border="0"  class="commentsTable">       
            <tr>
                <th class="commentsActionColumn">Action</th>
                <th class="commentBodyClass">Comments</th>
            </tr>
            <!-- get the case comments from the controller -->
            <apex:repeat value="{!comments}" var="c">
                <tr>
                <td class="commentsActionColumn">
                <!-- open the case comment for edit -->
                <apex:outputLink title="" value="/{!c.id}/e?parent_id={!c.parentId}&retURL=/apex/{!$CurrentPage.Name}%3Fid={!case.id}" style="font-weight:bold">Edit</apex:outputLink> 
                </td>
                <td>
                <!-- display the case comment formatted using the apex outputField -->
                <div class="commentTdClass">
                <apex:outputField value="{!c.commentbody}"></apex:outputField>
                </div>
                </td>
                </tr>
            </apex:repeat>
            </table>
        </apex:pageBlock>
    </apex:form>
</apex:tab>

Answer 4

Have you tried using outputText?

IF that does not work vote for my idea here: https://sites.secure.force.com/ideaexchange/ideaView?id=08730000000H4XDAA0 As I have the same issue when trying to return JSON to a page.

Other people also want this idea https://sites.secure.force.com/ideaexchange/apex/ideaview?id=08730000000BrhEAAS

Answer 5

For me, TehNrd nailed it -- I was trying to display a Case "Description" in a VisualForce notification e-mail template, and all the CR/LFs disappeared and the lines / paragraphs were getting run together. Making it an OutputField value totally fixed it.

Answer 6

You could try something like:

{!substitute(Case.Description, '\n', '<br/>')}