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

  发布时间:2019-08-09 16:23:42   作者:KASON   我要评论
这篇文章主要介绍了把富文本的回车转为br标签,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

例如:"我家孩子在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>展示,这样那边编辑的什么,这边就会显示什么

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

相关文章

  • 基于HTML5+tracking.js实现刷脸支付功能

    这篇文章主要介绍了基于HTML5+tracking.js实现刷脸支付功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-16
  • HTML中meta标签及Keywords

    这篇文章主要介绍了HTML中meta标签及Keywords的相关资料,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-15
  • 详解移动端h5页面根据屏幕适配的四种方案

    这篇文章主要介绍了详解移动端h5页面根据屏幕适配的四种方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来
    2020-04-15
  • html5移动端自适应布局的实现

    这篇文章主要介绍了html5移动端自适应布局的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学
    2020-04-15
  • HTML里显示pdf、word、xls、ppt的方法示例

    这篇文章主要介绍了HTML里显示pdf、word、xls、ppt的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编
    2020-04-14
  • HTML5 直播疯狂点赞动画实现代码 附源码

    为了烘托直播间的氛围,直播相对于普通视频或者文本内容,点赞动作通常无限次,引导用户疯狂点赞,今天小编给大家分享HTML5 直播疯狂点赞动画实现代码 附源码,感兴趣的朋
    2020-04-14
  • HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码

    这篇文章主要介绍了HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2020-04-10
  • canvas 基础之图像处理的使用

    这篇文章主要介绍了canvas 基础之图像处理的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学
    2020-04-10
  • 用canvas显示验证码的实现

    这篇文章主要介绍了用canvas显示验证码的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-10
  • HTML5给汉字加拼音收起展开组件的实现代码

    HTML 规范是 W3C 与 WHATWG 合作共同产出的,HTML5 因此也不例外,这篇文章主要介绍了HTML5给汉字加拼音收起展开组件的实现代码,需要的朋友可以参考下
    2020-04-08

最新评论