把富文本的回车转为br标签


Posted in HTML / CSS onAugust 09, 2019

例如:"我家孩子在SayABC小班课↵跟小伙伴们一起互帮互助,↵合作竞争,学习更加有动力!↵从简单的单词到句型和场景对话,↵孩子越来越敢于开口说英语啦![耶]↵扫码立即领取外教课[爱心]↵让孩子从小与世界接轨~"

需要转为才能被html识别,并且换行。可以这样做。

‘↵’是回车符'/n',这段内容是通过textarea人为编辑,提交给后端保存的。编辑框中可以识别的字符,在普通的标签里面没办法识别到,所以要转换成可以识别的<br/>

方法1

string.replace(/(rn|n|r)/gm, "
")

然后再用v-html=转换之后的string,就可以正常展示换行了

方法2

第二种方法是用 <pre></pre>标签,<pre> 标签的一个常见应用就是用来表示计算机的源代码。可以识别字符串中的‘/n’,‘/r/n’, 制表符,空格...

方法3

第三种方法是用<textarea></textarea>展示,这样那边编辑的什么,这边就会显示什么

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3 border-radius属性详解
Jul 05 HTML / CSS
详解Css3新特性应用之过渡与动画
Jan 10 HTML / CSS
CSS3 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
初探CSS3中的calc()功能
Jul 14 HTML / CSS
浅析css3中matrix函数的使用
Jun 06 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
使用CSS实现弹性视频html5案例实践
Dec 26 HTML / CSS
h5调用摄像头的实现方法
Jun 01 HTML / CSS
HTML5本地存储之Web Storage详解
Jul 04 HTML / CSS
Html5同时支持多端sdk的小技巧
Nov 17 HTML / CSS
css3手动实现pc端横向滚动
Jun 21 HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 #HTML / CSS
HTML5实时语音通话聊天MP3压缩传输3KB每秒
Aug 28 #HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
Sep 02 #HTML / CSS
html+css实现自定义图片上传按钮功能
Sep 04 #HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 #HTML / CSS
canvas实现圆绘制的示例代码
Sep 11 #HTML / CSS
前端canvas水印快速制作(附完整代码)
Sep 19 #HTML / CSS
You might like
PHP的消息通信机制测试实例
2016/11/10 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
PHP实现微信小程序人脸识别刷脸登录功能
2018/05/24 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
详解ES6通过WeakMap解决内存泄漏问题
2018/03/09 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
JavaScript ES 模块的使用
2020/11/12 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
python人人网登录应用实例
2014/09/26 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
python绘制中国大陆人口热力图
2018/11/07 Python
python+os根据文件名自动生成文本
2019/03/21 Python
对tensorflow 中tile函数的使用详解
2020/02/07 Python
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
木工主管岗位职责
2013/12/08 职场文书
《回乡偶书》教学反思
2014/04/12 职场文书
公司承诺书怎么写
2014/05/24 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
检讨书怎么写
2015/01/23 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
k-means & DBSCAN 总结
2021/04/27 Python
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js