后台返回数据中有换行符，但是在文本中不显示换行效果怎么渲染后台返回的一堆文字

╰半夏微凉° 2023-06-26 05:44 2阅读 0赞

## 换行由来 ##

Unix系统里，每行结尾只有“<换行>”，即"\\n"；Windows系统里面，每行结尾是“<换行><回车 >”，即“\\n\\r”；Mac系统里，每行结尾是“<回车>”，即"\\n"；。一个直接后果是，Unix/Mac系统下的文件在 Windows里打开的话，所有文字会变成一行；而Windows里的文件在Unix/Mac下打开的话，在每行的结尾可能会多出一个^M符号。 
 
c语言编程时（windows系统） 
\\r 就是return 回到 本行行首 这就会把这一行以前的输出 覆盖掉。 
**如： (注以下是C++代码)** 
最后只显示 xixi 而 hahaha 背覆盖了

复制代码代码如下:

int main () 
\{ 
cout << "hahaha" << "\\r" << "xixi" ; 
\}

\\n 是回车＋换行 把光标 先移到 行首 然后换到下一行 也就是 下一行的行首拉

复制代码代码如下:

int main() 
\{ 
cout << "hahaha" << "\\n" << "xixi" ; 
\}

**二换行符的表现形式** 
在普通文件里如（.txt,.php等）换行符是"\\r\\n", "\\n", "\\r"。但表现在HTML文件里时（这里说明一下：HTML的TEXTAREA文本域里的换行也是"\\r"或“\\n”）是“ ”标签。 
使用PHP脚本可以进转换。 
**代码如下(来至PHP手册)：**

复制代码代码如下:

//Order of replacement 
$str="Line1\\nLine2\\rLine3\\r\\nLine4\\n"; 
$order=array("\\r\\n","\\n","\\r"); 
$replace=' '; 
$newstr=str\_replace($order,$replace,$str);

（接口返回数据-已返回换行符）：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70][]

## 方法1： ##

后端接口返回换行标签

前端用<pre></pre>预格式化标签接收后端数据即可

## 方法2： ##

以php返回的数据是 \\r\\n 解析结果

//方法2：
 console.log(article);
 //php服务器：换行：\r\n 前端：textarea \n \r br
 // var aa=article.replace(/\r\n/g,' ');
 // console.log(aa); 
 // $(".article_info").html(aa);
 
 //方法3：
 var arr=article.split('\r\n');//字符串按转行转数组
 console.log(arr);
 var str='';
 for(var i=0;i<arr.length;i++){
 //数据处理后 有空内容
 if(arr[i]){
 str+=`${arr[i]}`;
 }else{
 str+=`${arr[i]}`;
 }
 }
 $(".article_info").html(str);

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191230163540115.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw==,size_16,color_FFFFFF,t_70