把富文本的回车转为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圆角边框和边框阴影示例
May 05 HTML / CSS
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
Feb 24 HTML / CSS
老生常谈CSS中的长度单位
Jun 27 HTML / CSS
HTML5中的nav标签学习笔记
Jun 24 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
HTML5之web workers_动力节点Java学院整理
Jul 17 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 HTML / CSS
CSS极坐标的实例代码
Jun 03 HTML / CSS
六个好看实用的 HTML + CSS 后台登录入口页面
Apr 28 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 jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
memcache命令启动参数中文解释
2014/01/13 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
php微信开发之谷歌测距
2018/06/14 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
php设计模式之建造器模式分析【星际争霸游戏案例】
2020/01/23 PHP
jQuery EasyUI NumberBox(数字框)的用法
2010/07/08 Javascript
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
jquery 淡入淡出效果的简单实现
2014/02/07 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
jquery实现拖动效果
2016/08/10 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
vue实现列表的添加点击
2016/12/29 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
Python实现将一个正整数分解质因数的方法分析
2017/12/14 Python
python requests使用socks5的例子
2019/07/25 Python
python使用sessions模拟登录淘宝的方式
2019/08/16 Python
使用python实现多维数据降维操作
2020/02/24 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
canvas画布实现手写签名效果的示例代码
2019/04/23 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
商场促销活动策划方案
2014/08/18 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
2014年电教工作总结
2014/12/19 职场文书
开学典礼致辞
2015/07/29 职场文书
被委托人身份证明
2015/08/07 职场文书
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL