vue移动端项目中遇到后台将富文本编辑器中的内容返回到前端时如果带上了标签

在开发项目中遇到一个需求,很简单的一个文本超过三行使用省略号代替,如下图


因为这些文本是获取的后台数据,本以为直接就简单的使用 v-html 就可以了,但是没想到单纯的使用了 v-html 之后,我的结构是这样的

本来以为仅仅只是个

标签包裹文本,但是这一瞅。。。(这还是人干的事吗)。看到这结构想必都知道已经无法简单的去直接设置多行省略了,小场面,不要慌。很简单,这个时候可以换个思路。将这些标签去掉不就好了吗,所以老大哥正则就开始上场了。我写的正则是简单除暴的去掉所有的HTML标签。话不多说贴上我解决的办法

然后就OK啦。开森

成功之后的图片

贴上代码以便于 Ctrl + C/V

v-html="teacher.intro.replace(/<\/?.+?\/?>/g, '')"

你可能感兴趣的:(vue移动端项目中遇到后台将富文本编辑器中的内容返回到前端时如果带上了标签)