把富文本的回车转为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系列之3D制作方法案例
Aug 14 HTML / CSS
CSS3 圆角效果
Jul 15 HTML / CSS
Html5 postMessage实现跨域消息传递
Mar 11 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
Dec 31 HTML / CSS
带你认识HTML5中的WebSocket
May 22 HTML / CSS
浅谈Html5多线程开发之WebWorkers
May 02 HTML / CSS
htnl5利用svg页面高斯模糊的方法
Jul 20 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
Aug 01 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
Feb 25 HTML / CSS
CSS3 天气图标动画效果
Apr 06 HTML / CSS
css3实现背景图片颜色修改的多种方式
Apr 13 HTML / CSS
HTML页面中使两个div并排显示的实现
May 15 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
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
PHP 裁剪图片成固定大小代码方法
2009/09/09 PHP
php启用zlib压缩文件的配置方法
2013/06/12 PHP
thinkphp的URL路由规则与配置实例
2014/11/26 PHP
php中array_unshift()修改数组key注意事项分析
2016/05/16 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
浅析node.js中close事件
2014/11/26 Javascript
jquery实现表单验证并阻止非法提交
2015/07/09 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
[01:24:16]2018DOTA2亚洲邀请赛 4.6 全明星赛
2018/04/10 DOTA
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
Python循环中else,break和continue的用法实例详解
2019/07/11 Python
python模块导入的方法
2019/10/24 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
迎接领导欢迎词
2014/01/11 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
小学生倡议书范文
2014/05/13 职场文书
公司踏青活动方案
2014/08/16 职场文书