How to replace \n with
in JSON string?

Question

I'm getting the following raw string from a JSON file. I console.log it display fine.

"Hello, my name is Jane, from "IStaff" company.\r\n\r\n.We are interested in your service.\r\n\r\n.Please call me back "

When I rendering this string, there is no new lines.

How exactly are you trying to insert it into the `
`? The code matters — CertainPerformance, Mar 21 '19 at 05:51
New lines won't display in the browser. You need to use `
` tag for a new line on the browser. Use [nl2br](http://php.net/manual/en/function.nl2br.php) to parse your JSON and convert all new lines to break tags before sending to client side. — nice_dev, Mar 21 '19 at 05:52

score 7 · Accepted Answer · answered Mar 21 '19 at 08:02

7

the best way in my case is just add in css : white-space: pre-wrap;

answered Mar 21 '19 at 08:02

Yerlan Yeszhanov

2,149
12
37
67

score 1 · Answer 2 · answered Mar 21 '19 at 05:58

If you insert that string into HTML, it will render by literally showing the \n and \r elements:

const string = 'Hello, my name is Jane, from "IStaff" company.\r\n\r\n.We are interested in your service.\r\n\r\n.Please call me back';
document.write(string);

You need to replace them with HTML   elements:

const string = 'Hello, my name is Jane, from "IStaff" company.\r\n\r\n.We are interested in your service.\r\n\r\n.Please call me back';
const renderString = string.replace(/(?:\r\n|\r|\n)/g, "<br>");
document.write(renderString);

Regex above from this answer.

score 1 · Answer 3 · answered Mar 21 '19 at 06:06

I think this problem occurs when you use innerHTML, use   instead of /r/n.

Example:

"Hello, my name is Jane, from 'IStaff' company.<br/> <br/> .We are interested in your service.<br/> <br/> .Please call me back "

"Hello, my name is Jane, from 'IStaff' company.

.We are interested in your service.

.Please call me back "

score 0 · Answer 4 · edited Mar 21 '19 at 06:06

0

Whitespace characters like newlines do not render in HTML. You have to change the \n into  

function nl2br(str, is_xhtml) {
  if (typeof str === 'undefined' || str === null) {
    return '';
  }
  var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
  return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
}

dataReceveid = function(json) {
  $("div").html(nl2br(json.str));
}

$(function() {
  dataReceveid({
    str: '"Hello, my name is Jane, from "IStaff" company.\r\n\r\n.We are interested in your service.\r\n\r\n.Please call me back "'
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>

edited Mar 21 '19 at 06:06

Soviut

88,194
49
192
260

answered Mar 21 '19 at 06:03

mastermind

1,057
1
8
15

where you get is_xhtml value? I'm not good at jquery , could please make with plain js? – Yerlan Yeszhanov Mar 21 '19 at 06:29
is_xhtml is not mandatory(no need to pass), it is their to handle if u are inserting string in the xhtml then u have to pass true. – mastermind Mar 21 '19 at 06:51
one more thing it is not related to jquery anyways – mastermind Mar 21 '19 at 06:54
displays as a plain text. Is it possible to get a raw srting and then insert
tags? – Yerlan Yeszhanov Mar 21 '19 at 07:11
sorry didn't get u,
displays as a plain text?? where are u displaying in html ? (div, textbox, textarea) – mastermind Mar 21 '19 at 07:18
here how it looks like:" Hello, my name is Jane, from "IStaff" company.

.We are interested in your service.

.Please call me back." I'm displaying it in div tag – Yerlan Yeszhanov Mar 21 '19 at 07:22

score 0 · Answer 5 · answered Mar 21 '19 at 06:14

The browser doesn't know what does it means \r\n. The language the web browser know only is HTML and \r\n is not an HTML language word. To break the line in the browser you have to use HTML language tag   so the browser can consider it and break the lines.

So the simple solution to your problem is replacing \r\n with   HTML tag/element.

How to replace \n with in JSON string?

5 Answers5

How to replace \n with
in JSON string?