后端传数据字符串带‘\n\r’时的前端渲染

最新推荐文章于 2023-11-28 15:21:23 发布

khadijiah

最新推荐文章于 2023-11-28 15:21:23 发布

阅读量1.7k

点赞数

分类专栏： vue css

本文链接：https://blog.csdn.net/khadijiah/article/details/93906495

版权

本文介绍了在后端传递包含' '的数据到前端时，如何正确渲染换行和制表符。通过使用CSS的white-space属性，可以确保和在前端页面上被正确识别并保留。文中列举了不成功的方法以及可行的CSS解决方案，并提供了相关的SCSS和HTML代码示例。

摘要由CSDN通过智能技术生成

直接上方法：下面是后端部分含有\n\t的数据：

不起作用的方法：message.replace('\\\n\r\','</br>');不知道为什么没有起作用

起作用的方法：用css

scss：

  .item {
    padding: 5px 0;
    max-height: 400px;
    overflow-y: scroll;
    white-space:pre-wrap; // 就是添加这个属性
  }

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

khadijiah

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

day59 后端传给前端数据，前端不显示的问题。

gaosong0623的博客

01-07

7103

做作业的时候遇到一个非常非常非常奇怪的问题。后端函数从数据库拿到数据，然而在前端数据却怎么也显示出来。 1.先排查数据库数据有没有问题，没有。 2.检查在后端数据库能不能显示出来，能显示出来。 3.重新写一个前端页面，只显示这个数据，看看能不能显示出来。发现是可以的？？？？甚至我重新在后端写个函数，直接返回那个不能显示数据的页面，竟然发现不能显示的数据，显示成功了？这特喵的是为什...

前端处理后端返回的数据中有\n\n字样的换行符标识

张张张的博客

08-08

5923

上面圈着的部分就是\n，前端需要将数据进行换行，对于这类型的数据，在前端页面是需要进行稍微处理才能正常显示。如果没有经过处理，那么内容是不会在有换行符的位置进行换行显示的。pre-wrap:连续的空白符会被保留。在遇到换行符或者< br >元素，或者需要为了填充「行框盒子(line boxes)」时才会换行。pre-line连续的空白符会被合并。在遇到换行符或者< br >元素，或者需要为了填充「行框盒子(line boxes)」时会换行。使用v-html输出文本。以上两种方法都可以实现。

参与评论您还未登录，请先登录后发表或查看评论

后端返回的数据是数字但是前端需要根据数字渲染不同状态（枚举方法）

weixin_70426591的博客

10-30

672

枚举法

前端处理后端返回的内容中的/r/n

m0_70722541的博客

05-10

838

后端返回的字段内容中含有/r/n，前端需要去掉。假设后端返回的字段data中含有/r/n，

字符串里有\r \n \t 等特殊符号, 前端页面怎么显示出来

weixin_49577940的博客

11-17

1万+

如图, 右边是后端返回给我的数据 , 包含\r\n , 就是换行加空格 ,页面上要像左边一样显示出换行及空格,如果直接用普通标签渲染数据 , 换行和空格不会显示出来 , 这时候需要用pre标签渲染一 , pre标签的作用 <pre> 标签可定义预格式化的文本。被包围在 <pre> 标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。如果想要把某一段规定好的文本格式放在HTML中，那么就要利用pre元素的特性二 ...

后端返回的数据，如何在前端进行渲染

最新发布

我是Superman丶的博客

11-28

1173

【代码】【前端】html不渲染换行\n\t\r等的问题。

后台的换行标签如何渲染

鱼儿的博客

03-11

462

后台的<br/>标签如何渲染在前端页面改成这样v-html="XXX" 效果：内容为--全英文+数字的强制换行css white-space:normal; word-break:break-all;

将字符串中的“/n“转为“＜/br＞“然后在html中渲染

周金鱼啊

09-27

2752

js处理方式 //将“/n”替换为“</br>” string = string.replace(/\r\n/g,"</br>") //将”/r/n“替换为”</br>“ string = string.replace(/\n/g,"</br>"); //替换所有的空格（中文空格、英文空格都会被替换） string = string.replace(/\s/g," "); css直接处理 //content为需要渲染的字符串.

js替换字符串中的\n

光和效应lw的博客

08-02

1588

背景：后端返回长长的一个字符串，里面有很多\n，前端需要把\n转换成，并在页面显示出换行的效果。

JS读取txt文件，并进行相关的处理

qq_42190727的博客

06-01

8431

最近在搞一些关于度量方面的动作，需要将度量结果写入到对象数组中。因为数据量比较大，手动去搬运实在是太麻烦了，所以决定借助于JS实现这一任务。在进行这个工作前，我也查了一些相关的内容。确实，在应用场景中是不会用JS去处理txt的，所以网络上相关的内容很少。所以我写下这篇博客，记录一下JS读取txt的方法，以及我在处理中遇到的一些问题。在读取文件上，Chrome与IE略有不同，我的代码是针对于Chrome浏览器的，IE的话需要使用ActiveXObject，需要大家注意一下。 1、TXT文件的读取

后端返回&lt；p&gt；&lt；br /&gt；前端如何渲染

weixin_52259399的博客

02-20

522

【代码】后端返回<p><br />前端如何渲染。

vue {{}} \r\n br/ 换行符无法识别

qq_40844960的博客

07-05

1022

vue {{}} 换行

怎么解析后台返回数据中\r\n换行

weixin_51396911的博客

05-24

1021

Unix系统里，每行结尾只有“”，即"\n"；Windows系统里面，每行结尾是“”，即“\n\r”；Mac系统里，每行结尾是“”，即"\n"；。一个直接后果是，Unix/Mac系统下的文件在 Windows里打开的话，所有文字会变成一行；而Windows里的文件在Unix/Mac下打开的话，在每行的结尾可能会多出一个^M符号...

后端es传到前端的多条字符串数据包含span标签,前端循环让该span标签背景高亮

05-18

可以使用一些前端框架或者库来实现这个功能，比如React、Vue等。如果使用React，可以使用dangerouslySetInnerHTML属性将后端传来的字符串渲染到页面上，然后使用CSS样式来为span标签设置背景高亮。具体的实现步骤如下： 1. 在React组件中定义一个state，用来保存后端传来的字符串数据。 ``` import React, { useState } from 'react'; function App() { const [data, setData] = useState(''); // 这里可以使用fetch或者axios等工具从后端获取数据 // 然后将获取到的数据设置到state中 return ( <div dangerouslySetInnerHTML={{ __html: data }}></div> ); } export default App; ``` 2. 在CSS样式表中定义一个span标签的样式，设置背景颜色为高亮色。 ``` span.highlight { background-color: yellow; } ``` 3. 使用JavaScript遍历渲染后端传来的字符串，为其中的span标签添加highlight类名。 ``` import React, { useState, useEffect } from 'react'; function App() { const [data, setData] = useState(''); useEffect(() => { // 这里可以使用fetch或者axios等工具从后端获取数据 // 然后将获取到的数据设置到state中 // 这里使用静态数据来模拟后端传来的字符串 const str = '<div><span>hello</span><span>world</span></div>'; setData(str); }, []); useEffect(() => { const div = document.createElement('div'); div.innerHTML = data; const spans = div.getElementsByTagName('span'); for (let i = 0; i < spans.length; i++) { spans[i].classList.add('highlight'); } setData(div.innerHTML); }, [data]); return ( <div dangerouslySetInnerHTML={{ __html: data }}></div> ); } export default App; ``` 这样就可以实现将后端传来的多条字符串数据包含span标签，循环让该span标签背景高亮的功能了。