前端页面根据后端返回的文本将换行符(“↵”)进行换行展示

有时我们会遇到这种情况,后端传递了一大段包含了回车符的文本内容,前端展示的时候所有文字堆在一起,没有换行展示。

以下方法中content为后端返回的文本内容

方法一:

“↵”符号在html中会识别别为\r,\n等转义字符,所以我们可以使用\r\n去替换(.replace(/(\r\n|\n|\r)/gm, ’< br />')

<div v-html="content.replace(/(\r\n|\n|\r)/gm, '<br />')"></div>

方法二:

使用<pre>标签, 它会自动识别和处理后台返回的换行符号

<pre>{{content }}</pre>

方法三:

white-space样式

<div class="logDetail">{{ content }}</div>

css样式

.logDetail {white-space: pre-wrap;/* white-space:pre-line; */
}

white-space CSS 属性是用来设置如何处理元素中的 空白。

  • pre-wrap:连续的空白符会被保留。在遇到换行符或者< br >元素,或者需要为了填充「行框盒子(line boxes)」时才会换行。

  • pre-line连续的空白符会被合并。在遇到换行符或者< br >元素,或者需要为了填充「行框盒子(line boxes)」时会换行。

方法四:

(下面是在Vue中实现的,所有框架思想一样)

<template><div v-html="contentFormat"></div>
</template>
<script>
export default {data(){return{//存储后端返回的,文本content:"",}},//计算属性,与data同级computed: {contentFormat() {//this.content存储后端传回来的文本数据,就是要对这个数据进行处理let arr = this.content.split("");return arr.map((item) => {return item === "\n" ? "<br>" : item;}).join("");},},methods:{getData(){....this.content=xxx;}}
}
</script>

思想:将文本字符串转化为数组,然后将数组中“\n”换成浏览器正常解析的换行标签<br>即可。(后端传回来的“↵”就是\r\n),上面同样可以使用正则表达式来将字符串的换行符转换为< br >,那么就不用转换为数组了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/111581.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ubuntu 18.04 LTS中cmake-gui编译opencv-3.4.16并供Qt Creator调用

一、安装opencv 1.下载opencv-3.4.16的源码并解压 2.在解压后的文件夹内新建文件夹build以及opencv_install 3.启动cmake-gui并设置 sudo cmake-gui&#xff08;1&#xff09;设置界面中source及build路径 &#xff08;2&#xff09;点击configure&#xff0c;选择第一个def…

正点原子嵌入式linux驱动开发——Linux按键输入

在前几篇笔记之中都是使用的GPIO输出功能&#xff0c;还没有用过GPIO输入功能&#xff0c;本章就来学习一下如果在Linux下编写GPIO输入驱动程序。正点原子STM32MP1开发板上有三个按键&#xff0c;就使用这些按键来完成GPIO输入驱动程序&#xff0c;同时利用原子操作来对按键值进…

Ubuntu20.4 设置代理

主要是涉及2个代理 涉及apt 可以在、/etc/apt/apt.conf 中进行修改 在系统全局可以在/etc/profile中进行修改

【深度学习基础知识(一):卷积神经网络CNN基础知识】

深度学习基础知识 深度学习基础知识&#xff08;一&#xff09;&#xff1a;卷积神经网络CNN基础知识 卷积神经网络CNN基础知识 0、目录 1. CNN卷积神经网络的特点 2. 卷积操作基础知识 2.1 卷积操作的概念2.2 卷积操作的种类2.3 卷积操作后特征图谱大小计算公式 3. 池化操…

02、Python ------- 简单爬取下载小视频

简单爬取小视频 1、装模块 按键盘 winr 输入cmd , 输入命令&#xff1a; pip install requests 也有说在这个目录下面执行命令 pip install requests 执行失败 执行如果失败&#xff0c;在命令后面添加镜像 pip install requests -i https://mirrors.aliyun.com/pypi/sim…

LuaJIT编写的解析十六进制数据

以下是使用LuaJIT编写的解析十六进制数据并将uint16转换为JSON的示例代码&#xff1a; local ffi require("ffi") local bit require("bit") local cjson require("cjson")-- 定义结构体 ffi.cdef[[typedef struct {uint16_t value;} uint16…

Android 13 隐私权限和安全变更之通知

介绍 根据官网https://developer.android.com/about/versions/13/summary?hlzh-cn展示的Android 13 功能和变更列表中提及的&#xff0c;Android 13&#xff08;API 级别 33&#xff09;引入了新的权限POST_NOTIFICATIONS。 使用 在Android 13及以上版本&#xff0c;如需向…

Steam中如何设置HTTP服务器防封

要在 Steam 中设置HTTP服务器&#xff0c;请按照以下步骤操作&#xff1a; 1、打开 Steam 客户端。 2、点击“设置”&#xff08;即齿轮图标&#xff09;&#xff0c;然后选择“网络”。 3、在“网络”页面中&#xff0c;找到“HTTP服务器”部分。 4、首先&#xff0c;将“使…

显示杂谈(二)winscope的使用

WinScope 提供了用于在窗口转换期间和转换后记录和分析 WindowManager 状态和 SurfaceFlinger 状态的基础架构和工具。WinScope 将所有相关的系统服务状态记录在一个跟踪文件中&#xff0c;您可以使用该文件重现并逐步查看转换。 抓winscope相关文件: 通过快捷设置记录跟踪情…

Nacos 401 Client not connected

jar包在本地运行没有问题&#xff0c;但是把包放到linux上就运行不起来&#xff0c;报错如下&#xff08;远程debug截的图&#xff09; 后来看到文章-猜测可能和连接时间有关系 就是本地连接快&#xff0c;linux建立连接慢&#xff0c;采用上面文章的人工强制sleep建议&#…

Linux系统磁盘挂载和卸载教程,详细介绍挂载点、命令及最佳实践

文章目录 1. 引言2. Linux文件系统3. 挂载点与目录结构4. 硬盘设备识别5. 挂载命令&#xff08;mount&#xff09;6. 查看已挂载的文件系统7. 卸载命令&#xff08;umount&#xff09;8. 自动挂载与持久化9. 挂载和卸载的最佳实践10. 总结 python精品专栏推荐python基础知识&am…

Vue2基础知识(二) 计算属性/侦听器/生命周期

&#x1f48c; 所属专栏&#xff1a;【Vue2】&#x1f600; 作 者&#xff1a;长安不及十里&#x1f4bb;工作&#xff1a;目前从事电力行业开发&#x1f308;目标&#xff1a;全栈开发&#x1f680; 个人简介&#xff1a;一个正在努力学技术的Java工程师&#xff0c;专注基础和…

本地电脑怎么连接服务器?103.216.154.x

当我们有了一台属于自己的服务器的时候&#xff0c;想远程桌面连接到服务器&#xff0c;怎么连接呢&#xff0c;下面来分享一下方法&#xff01; 准备工作:服务器(服务器ip&#xff0c;端口&#xff0c;账号密码) 个人电脑 第一步在我们的电脑上面按winR键打开运行&#xff0…

[云原生1.] Docker容器的简单介绍和基本管理

文章目录 1. Docker容器的基本概述1.1 简介1.2 容器的优点1.3 Docker与虚拟机的区别1.4 Docker核心组成1.4.1 镜像1.4.2 容器1.4.3 仓库 1.5 容器在内核中支持2种重要技术1.5.1 linux六大namespace&#xff08;命名空间&#xff09; 1.6 Docker的使用场景 2. Docker的部署2.1 前…

小红书达人怎么对接,博主沟通流程汇总!

想要在小红书平台进行宣推&#xff0c;就离不开博主的帮助。一般来说&#xff0c;与小红书博主沟通&#xff0c;分为意向沟通、下单沟通、内容沟通和数据沟通方面。今天为大家分享下小红书达人怎么对接&#xff0c;博主沟通流程汇总&#xff01; 一、意向沟通 意向沟通是小红书…

【MyBatis进阶】mybatis-config.xml分析以及try-catch新用法

目录 尝试在mybatis项目中书写增删改查 遇见问题&#xff1a;使用mybaties向数据库中插入数据&#xff0c;idea显示插入成功&#xff0c;但是数据库中并没有数据变化? MyBatis核心配置文件剖析 细节剖析&#xff1a; try-catch新用法 截至目前我的项目存在的问题&#xf…

短视频矩阵系统/pc、小程序版独立原发源码开发搭建上线

短视频剪辑矩阵系统开发源码----源头搭建 矩阵系统源码主要有三种框架&#xff1a;Spring、Struts和Hibernate。Spring框架是一个全栈式的Java应用程序开发框架&#xff0c;提供了IOC容器、AOP、事务管理等功能。Struts框架是一个MVC架构的Web应用程序框架&#xff0c;用于将数…

使用Apache和内网穿透实现私有服务公网远程访问——“cpolar内网穿透”

文章目录 前言1.Apache服务安装配置1.1 进入官网下载安装包1.2 Apache服务配置 2.安装cpolar内网穿透2.1 注册cpolar账号2.2 下载cpolar客户端 3. 获取远程桌面公网地址3.1 登录cpolar web ui管理界面3.2 创建公网地址 4. 固定公网地址 前言 Apache作为全球使用较高的Web服务器…

Maven安装教程

目录 不喜欢废话&#xff0c;直接上教程&#xff01; 第一步&#xff1a;下载maven 第二步&#xff1a;环境配置 第三步&#xff1a;配置maven 配置maven包括配置本地仓库的位置&#xff0c;配置镜像&#xff0c;配置JDK&#xff0c;都在settings.xml里面配置 配置本地仓…

大语言模型之十八-商业思考

大语言模型在翻译、知识问答、写作、摘要、搜索、代码开发等场景得到了广泛的应用&#xff0c;一些策略是将大语言模型集成到公司的现有产品&#xff0c;比如微软的Office接入ChatGPT。 当前大语言模型盈利情况堪忧&#xff0c;今年 5 月有媒体曝出因去年开发出 ChatGPT&#…