Using new line(\n) in string and rendering the same in HTML

Question

I have a string say

string display_txt = "1st line text" +"\n" + "2nd line text";

in Jquery, I am trying to use

('#somediv').html(display_txt).css("color", "green")

quite clearly I am expecting my msg to be displayed in 2 lines, but instead \n is being displayed in the message. Any quick fixes for that?

Thanks,

Quite clear, answer is in your question, you are trying to render the error message in div as html, so you can use `
` tag — Murtaza, Dec 20 '11 at 10:21
There is nothing "quite clear" in expecting two lines. On the contrary, it is quite clear that the newline will be rendered as plain space, only wrapping the line if needed. It is how HTML works, of course it is also how `.html` works. — , Dec 20 '11 at 10:24
I just meant with the context where i have stored my string as "1st line text" and "2nd line text" , it was clear that i want these in 2 lines, not with respect to how html works:) thank you. — KeenUser, Dec 20 '11 at 10:48
related: https://stackoverflow.com/questions/9726970/how-to-preserve-newlines-when-showing-a-text-file-with-jquery — frederj, Sep 17 '19 at 21:11

vsync · Answer 1 · 2017-08-07T07:06:19.823

199

Set your css in the table cell to

white-space:pre-wrap;

document.body.innerHTML = 'First line\nSecond line\nThird line';

body{ white-space:pre-wrap; }

edited Aug 07 '17 at 07:06

answered Apr 06 '14 at 16:11

vsync

118,978
58
307
400

7

so isn't this supposed to be the accepted answer? LE: I see that this is only supported in IE 8+ [link](http://www.w3schools.com/cssref/pr_text_white-space.asp) – gciochina Mar 17 '16 at 09:04
6

This answer is way better than setting the innerHTML, because it doesn't cause a XSS vulnerability. – LinusK Mar 29 '16 at 21:53
5

Besides, you can use `white-space:pre-line;` as sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks. More information on: [https://www.w3schools.com/cssref/pr_text_white-space.asp](https://www.w3schools.com/cssref/pr_text_white-space.asp) – HakuteiJ Jul 17 '17 at 01:56
This answer does not convert \n within text to a newline – irl_irl Jul 25 '17 at 11:20
3

@ste_irl - what do you mean? the `\n` means a new line should be printed and it does print it – vsync Aug 07 '17 at 07:07

score 85 · Accepted Answer · edited Oct 04 '16 at 00:35

85

Use <br /> for new line in html:

display_txt = display_txt.replace(/\n/g, "<br />");

edited Oct 04 '16 at 00:35

Felix Kling

795,719
175
1,089
1,143

answered Dec 20 '11 at 10:19

Samich

29,157
6
68
77

1

for some reason, I've to escape the "\n" as "\\n" or else it doesn't work. (tested in Chrome 46). Any reason why? – Sujay Phadke Dec 17 '15 at 19:05
3

Please note that this will only replace the first occurence of the `\n` character inside the string. See the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace) – Dominic Boulanger Jun 14 '16 at 17:59
3

best `.replace(/\n/g, "
")` is prevent more newline. – KingRider Aug 05 '16 at 16:36
4

I think @vsync 's answer should be the accepted one. – Ayush Kumar Apr 26 '19 at 07:09
Worked perfectly. Thank you. – joshlsullivan Oct 17 '19 at 17:31
@SujayPhadke for some reason it's just printing `\n` as text when I try to escape :-( – Dharmaraj May 04 '20 at 13:37

Frank im Wald · Answer 3 · 2016-01-29T09:59:45.747

You could use a pre tag instead of a div. This would automatically display your \n's in the correct way.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
         var display_txt = "1st line text" +"\n" + "2nd line text";
         $('#somediv').html(display_txt).css("color", "green");
});
</script>
</head>
<body>

<pre>
<p id="somediv"></p>
</pre>

</body>
</html>

score 1 · Answer 4 · answered Dec 20 '11 at 10:21

1

Maybe .text instead of .html?

answered Dec 20 '11 at 10:21

score 0 · Answer 5 · answered Apr 28 '20 at 15:47

0

I had the following problem where I was fetching data from a database and wanted to display a string containing \n. None of the solutions above worked for me and I finally came up with a solution: https://stackoverflow.com/a/61484190/7251208

answered Apr 28 '20 at 15:47

Kevin H Griffith

238
4
8

Using new line(\n) in string and rendering the same in HTML

5 Answers5

Linked

Related