Question

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

implementation project(path:':test', configuration:'default')

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

Answer 1

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

示例：

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

“您好，我叫'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  元素：

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

this answer上方的正则表达式。

Answer 3

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

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语言标记 ，以便浏览器可以考虑并换行。

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

Answer 5

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

如何用JSON字符串中的<br/>替换\ n？

5 个答案: