如何根据后端数据的换行标记在前端页面显示换行

在实际业务场景中我们可能有这样的需求,将请求到的数据在前端显示换行,数据中有\n或者<br>的标记,但是在页面上显示可能并不是换行的效果。

1.后端数据中包含 \n 那我们请求到数据以后先要进行替换,把 \n替换为 <br>   str.replace(/\\n/gmi, ‘<br>‘)

2.html文件中使用 <pre></pre>标签进行包裹,就可以显示出换行的效果了。

3.在vue项目中可以直接使用v-html指令,不会作为vue模板进行编译。

原文地址:https://www.cnblogs.com/linxing/p/11082581.html

时间: 2024-10-10 03:43:24

如何根据后端数据的换行标记在前端页面显示换行的相关文章

django--问题描述:后端数据输出正常,但前端不显示数据

Django爬坑记录 背景:普通的django项目,一个新闻类的网站,前后端半分离. 问题描述:后端数据输出正常,但前端不显示数据 前端数据不显示 后端传数据正常 前端js也正常 问题解决:前端res响应未发现 原文地址:https://www.cnblogs.com/xjl-dwy/p/10769678.html

指定长度,页面显示换行

//换行 在指定长度换行 public string SetBRByLen(string str, int len) { string s = ""; string s2 = ""; if (str.Length > len) { int j = str.Length / len + 1; int z = str.Length % len; int o = j - 1; for (int i = 0; i < j; i++) { if (i == j -

后端设置cookie写不到前端页面

javax.servlet.http.Cookie cookie = new javax.servlet.http.Cookie("id",session.getId()); cookie.setPath("/"); cookie.setDomain(".kuangke.com"); cookie.setMaxAge(-1); response.addCookie(cookie); 如果存在注解@ResponseBody 则写不到前端页面,具体原

servlet自动获取前端页面提交数据

servlet自动获取前端页面jsp提交数据 以下是本人在学习过程中,因前端页面提交参数过多,后台servlet封装实体类过于麻烦而写的一个工具类,应用于jsp/servlet数据提交后,基于MVC+MyBatis进行数据持久化的过程.这里只介绍页面到servlet(controller)提交数据封装对象的过程,MVC+MyBatis访问数据库不在这里介绍. 1.前端页面及代码 1)前端表单页面构建(用于测试简单构建的页面有点丑陋哦~) 2)前端jsp页面代码   这里使用了Ajax异步 get

【springMVC】简单的前后端数据交流

最最常见两种,一则返回视图模板(文档),二则为json数据.就使用一个源代码文件来看看springmvc是怎么做到的. 1.UserController.java源代码文件 (这里额外的使用了fastjson架包来将对象解析为json) package com.zay; import com.alibaba.fastjson.JSON; import org.springframework.stereotype.Controller; import org.springframework.web

前后端数据交互方法

在此介绍几种常用的前后端数据交互方法,并给出使用建议.以提高前后端协同开发的效率. 此文章适合前后端协同开发经验不足的新手阅读. 目录: HTML赋值 JS赋值 script填充JSON AJAX获取JSON WebSocket实时传输数据 总结 HTML赋值 输出到 Element 的 value 或 data-name <input type="hidden" value="<?php echo $user_avatar;?>" /> &

关于前端和后端数据交互问题

作者:NimoChu链接:https://www.zhihu.com/question/26532621/answer/33144979来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 重新修改答案后整理了一份<前后端数据交互方法> 在此介绍几种常用的前后端数据交互方法,并给出使用建议.以提高前后端协同开发的效率. 目录: 1. HTML赋值2. JS赋值3. script填充JSON4. AJAX获取JSON5. WebSocket实时传输数据6. 总结 1.

前后端数据交互方法(2)

以下观点来源于知乎上的总结,个人感觉说的比较全面,总结如下 作者:Nimo True链接:https://www.zhihu.com/question/26532621/answer/33144979来源:知乎 1. HTML赋值2. JS赋值3. script填充JSON4. AJAX获取JSON5. WebSocket实时传输数据6. 总结 1. HTML赋值输出到 Element 的 value 或 data-name <input type="hidden" value=

ECharts, PHP, MySQL, Ajax, JQuery 实现前后端数据可视化

ECharts 下载js代码 工作原理浅析 在项目中引入ECharts 后台处理 数据库端MySQL PHP端 JQuery Ajax处理 ECharts 端处理 前端全部代码 演示结果 总结 最近要将后台数据库上的一些数据以可视化的方法显示到前端,找来找去,发现百度开发的这套图表工具库还不错,网上搜索了一下相关的教程,也算是实现了较为简单的demo.于是写下来,记录一下. ECharts ECharts是国人开发的一套前端的图表工具库,使用起来超方便,也很简单(当然了,前提是理解了其工作原理之