如何用\\ n替换\\ n <br> 在JSON字符串？

Question

我从JSON文件中获取以下原始字符串。 我console.log它显示正常。

"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 "

渲染此字符串时，没有新行。

Answer 1

我认为当您使用innerHTML时，使用<br/>而不是/ r / n会发生此问题。

例：

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

“您好，我叫Jane，来自'IStaff'公司。

。我们对您的服务感兴趣。

。请给我回个电话 ”

Answer 2

如果将该字符串插入HTML，它将通过显示\\n和\\r元素来呈现：

 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); 

您需要将它们替换为HTML <br>元素：

 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); 

正则表达式来自此答案 。

Answer 3

诸如换行符之类的空格字符不会在HTML中呈现。 您必须将\\n更改为<br>

 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> 

Answer 4

浏览器不知道\\r\\n是什么意思。 Web浏览器仅知道的语言是HTML ， \\r\\n不是HTML语言单词。 要在浏览器中换行，您必须使用HTML语言标记<br />以便浏览器可以考虑并换行。

因此，解决您的问题的简单方法是将\\r\\n替换为<br /> HTML标签/元素。

Answer 5

在我的情况下，最好的方法是在CSS中添加：white-space：pre-wrap;