Display line break in <div> tag from database

Question

I have to display an article from database inside a < div> tag. This article was inserted into database from a textarea. My problem is: i could not display exactly the structure that i inserted from the textarea (including line break)

I tried the below code to replace the enter character to < br> tag but it did not work

<div id="tmpId">${f:h(dto.accPassage)}</div>

<script>
    $(function(){
        $('#tmpId').html($('#tmpId').html().replace(/\n/g, '<br />'));
    })
</script>

I wonder if someone could give me some hints to solve this problem.

Thank you very much.

Answer 1

if you want it to be exactly as it is in the database, then just render it inside a <pre> tag, instead of a <div>.

<pre id="tmpId">${f:h(dto.accPassage)}</pre>

That will preserve the exact formatting in the enclosed text block.

Answer 2

Give <br> without the ending slash.

Answer 3

Since you're retrieving it from the DB, why do it client-side and not do the replace as soon as you retrieve the data from your DB ? Not sure what you're using (although that's irrelevant since this can be done in any language) but in PHP, assuming $output is your DB result it would be as easy as

$output = nl2br($output);

Hope this helps !

Answer 4

Since you're using java, you could always write something like the following to replace the new lines after you've retrieved the data from database.

public static String nl2br(String s) {
    return s.replaceAll("\n","<br/>");
}
// usage
nl2br("some\ntext"); //will return "some<br/>text"