html富文本的 ↵ 转为</br>标签使用说明_标签使用攻略

例如:”我家孩子在SayABC小班课↵跟小伙伴们一起互帮互助,↵合作竞争,学习更加有动力!↵从简单的单词到句型和场景对话,↵孩子越来越敢于开口说英语啦![耶]↵扫码立即领取外教课爱心↵让孩子从小与世界接轨~”需要转为才能被html识别,并且换行。可以这样做。‘↵’是回车符’/n’,这段内容是通过textarea人为编辑,提交给后端保存的。编辑框中可以识别

html富文本的 ↵ 转为</br>标签使用说明

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

html富文本的 ↵ 转为</br>标签使用说明_标签使用攻略

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

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

方法1

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

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

方法2

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

方法3

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

海计划公众号
(0)
上一篇 2020/03/29 01:42
下一篇 2020/03/29 01:42

您可能感兴趣的内容

  • Savieo菜鸟指南_万能影片视频下载器

    Savieo菜鸟指南 官方网址:https://savieo.com/ 简介描述:万能影片视频下载器 Savieo一个号称可以下载全世界34个影片来源的视频嗅探下载器,包含YouT…

    2020/03/10
  • Chromoscope指南攻略_让你拥有超人般的透视能力,可以自主选择

    Chromoscope指南攻略 官方网址:http://www.chromoscope.net/ 简介描述:让你拥有超人般的透视能力,可以自主选择 让你拥有超人般的透视能力,可以自…

    2020/03/08
  • CSS3中的box-sizing(content-box与border-box)指南教程_盒子小白攻略

    CSS3中的box-sizing 属性允许以特定的方式来指定盒模型,有两种方式:content-box:标准盒模型,又叫做 W3C盒模型,一般在现代浏览器中使用的都是这个盒模型border-box:怪异盒模型,低版本IE浏览器中的盒模型 现代浏览器和IE9+默认值是content-box。
    语法格式:box-sizing:content-box | bo

    2020/03/30
  • css的继承性小白入门_继承入门基础知识

    css 的继承性是什么?在面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法。
    那么我们现在主要研究css,css就是在设置属性的。不会牵扯到方法的层面。css的继承:就是给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承。 官方解释,继承是一种规则,它允许样式不仅应用于特定的html标签元素,而且应用于

    2020/03/30
  • CSS便捷开发小工具汇总入门知识_css小白基础

    prefixfree前缀补全插件虽然现代浏览器支持CSS3,但是一些过往的版本或是目前有些CSS3属性的应用还是离不开前缀的。一些牛逼且执着于web技术且乐于分享的仁兄(Lea Verou)就搞了个名叫prefixfree.js的插件可以自动补全前缀。首先在页面任意地方(能生效的方)插入插件:<

    2020/04/03
  • js实现图片转base64格式,并压缩上传零基础入门_图片入门基础

    需求: 需要用户上传身份证,并识别身份证的编号存储在后端,这里要求实现图片上传,并转为base64的格式,传给服务器识别图片的身份证号码。由于很多用户用手机拍摄的照片,出现尺寸比较大的情况,因此需要进行压缩处理,比如:图片宽或者高大于1000px,就进行等比例压缩后再进行上传。 思路: 1) 调用 FileReader的 reader.readAsDataU

    2020/03/26
  • 什么是在线代理ip网页代理基础教程_代理攻略教程

    当我们需要大量IP进行快节奏完成业绩的时候,很多人都会想到去IP代理服务商那里购买IP代理,所以我相信很多人对于IP代理这个词已经有一定的认识了,那么还有一个词叫做:“在线代理ip网页代理”这个词和IP代理有什么区别,那么犀牛代理在这里就简单的为大家介绍一下这个词的含义,在线代理又叫做代理服务器,其功能是代理网络上的某一个使用获取网络信息,也就是扮演一个中间

    2020/04/03
  • vue 单文件 scoped 样式简析入门基础_样式小白攻略

    如何使用.klass {/* style */}
    scoped 是一个极其常用的 标签属性,使用后这一块样式能“神奇地”只应用在当前单文件组件,不会干扰到其父子组件。其原理其实很简单,只要加上了 scoped,当前文件所有元素(不包括调用的其他组件)都会加上一串识别码,样式只作用于带码的元素。举个简

    2020/03/20
  • “回调函数”超难面试题!!入门百科_函数使用帮助

    let app = {ary: [],use(fn) {this.ary.push(fn);}};app.use((next) => {console.log(1);next();console.log(2)});app.use((next) => {console.log(3);next();console.log(4)});app.use

    2020/04/03
  • React Fiber入门指南_线程使用教程

    背景前段时间准备前端招聘事项,复习前端React相关知识;复习React16新的生命周期:弃用了componentWillMount、componentWillReceivePorps,componentWillUpdate三个生命周期, 新增了getDerivedStateFromProps、getSnapshotBeforeUpdate来代替弃用的三个钩

    2020/03/29
  • JS内嵌多个页面,页面之间如何更快捷的查找相关联的页面基础入门_页面入门指南

    假设parent为P页面,P页面有两个子页面,分别为B页面和C页面;B页面和C页面分别内嵌一个iframe,分别为:D页面和E页面,现在通过B页面的内嵌页面D的方法refreshEpage(eUrl)来加载内嵌页面E的内容.需求:通过页面E如何快速找到页面D?常规的做法是通过E页面通过.parent找到页面B,再通过页面B找到里面内嵌的页面E更方便的做法可以

    2020/03/24
  • CommonJS的模块加载小白知识_模块菜鸟教程下载

    叨叨一会CommonJSCommon这个英文单词的意思,相信大家都认识,我记得有一个词组common knowledge是常识的意思,那么CommonJS是不是也是类似于常识性的,大家都理解的意思呢?很明显不是,这个常识一点都不常识。我最初认为commonJS是一个开源的JS库,就是那种非常方便用的库,里面都是一些常用的前端方法,然而我错得离谱,Common

    2020/03/29
  • 如何写出让同事无法维护的代码?新手入门_代码教程视频

    原文地址译文地址对,你没看错,本文就是教你怎么写出让同事无法维护的代码。一、程序命名容易输入的变量名。比如:Fred,asdf单字母的变量名。比如:a,b,c,x,y,z(如果不够用,可以考虑 a1,a2,a3,a4,….)有创意地拼写错误。比如:SetPintleOpening, SetPintalClosing,这样可以让人很难搜索代码。抽象。比如:Pr

    2020/03/24
  • W3C是什么?IETF是什么?入门基础教程_web入门指南

    无规矩不成方圆,软件开发当然不能例外。Web开发涉及的厂商和技术非常多,所以必须要有参考的标准,而且需要一系列的标准。Web程序都是通过浏览器来解析执行的,通过页面的展示内容与用户互动,所以Web标准不仅要求各个浏览器都要遵循,开发者一样要遵循相同的标准。而似乎和Web相关标准的制作组织机构很多,例如W3C、IETF、ECMA和 WHATWG等,哪些是我们

    2020/03/26
  • vue的provide / inject 有什么用?小白攻略_组件小白攻略

    1.前言vue的父子组件通信用什么?:prop和$emit的组合。如果是爷孙组件呢?:那么就要用父组件来转发数据和事件了。如果是太爷爷和孙子组件呢?:当然是vuex啦emmm 好的,没我啥事了,我这就走。不行,我还能再挣扎一会儿!肯定有一部分兄弟做的项目比较小,组件通信的情况不是很多,懒得引入vuex,那么provide/inject就是爷孙(不限于爷孙/父

    2020/03/23
  • css中flex-basis 和 width 到底有啥区别?使用帮助_width使用帮助

    刚才在网上复习flex布局,发现了一篇很不错的文章,虽然是翻译的国外技术贴,看过后,还是对flex有了更深的认识。先上笔记:1、flex容器 + flex项目 ==> flex布局。2、justify-content 设置主轴上的对齐方式,默认flex-start,也就是左对齐。3、align-items 设置交叉轴上的对齐方式,默认stretch,也就是拉

    2020/03/26