vue利用正则去除富文本的标签和样式

ts:

const removeHtmlStyle =(html :any)=> {
let relStyle = /style\s*?=\s*?([‘"])[\s\S]*?\1/g; //去除样式
let relTag = /<.+?>/g; //去除标签
let relClass = /class\s*?=\s*?([‘"])[\s\S]*?\1/g;// 清除类名
let newHtml = "";
if (html) {
newHtml = html.replace(relStyle, "");
newHtml = newHtml.replace(relTag, '');
newHtml = newHtml.replace(relClass, '');
}
return newHtml;
};
template:
<div class="rich" v-html="removeHtmlStyle(teacherData.teacher_intro)"></div>

vue去除富文本的标签和样式的更多相关文章

  1. vue修改富文本中的元素样式

    富文本编辑器目前应用很广泛,而有时候我们想要对其中的一些元素的样式进行修改,就会遇到问题. 首先,直接修改是不可行的,因为是用v-html标签进行渲染的,无法直接获取到. 在修改的时候,一般是按标签进 ...

  2. 去除富文本中的html标签及vue、react、微信小程序中的过滤器

    在获取富文本后,又只要显示部分内容,需要去除富文本标签,然后再截取其中一部分内容:然后就是过滤器,在微信小程序中使用还是挺多次的,在vue及react中也遇到过 1.富文本去除html标签 去除htm ...

  3. 【转载】Asp.Net MVC网站提交富文本HTML标签内容抛出异常

    今天开发一个ASP.NET MVC网站时,有个页面使用到了FCKEditor富文本编辑器,通过Post方式提交内容时候抛出异常,仔细分析后得出应该是服务器阻止了带有HTML标签内容的提交操作,ASP. ...

  4. 【转载】 Asp.Net MVC网站提交富文本HTML标签内容抛出异常

    今天开发一个ASP.NET MVC网站时,有个页面使用到了FCKEditor富文本编辑器,通过Post方式提交内容时候抛出异常,仔细分析后得出应该是服务器阻止了带有HTML标签内容的提交操作,ASP. ...

  5. vue项目富文本编辑器vue-quill-editor之自定义图片上传

    使用富文本编辑器的第一步肯定是先安装依赖 npm i vue-quill-editor 1.如果按照官网富文本编辑器中的图片上传是将图片转为base64格式的,如果需要上传图片到自己的服务器,需要修改 ...

  6. Vue之富文本tinymce爬坑录

    前言 最近因业务需求在项目中嵌入了tinymce这个富文本编辑器,用于满足平台给用户编辑各类新闻内容什么的业务需求,前后也花了不少时间体验和对比了市面上各类开源编辑器. *案例demo版本:vue-t ...

  7. Jquery会死吗?我为什么不用vue写富文本!

    一.事件背景: 我最近开源了一个个人耗时半年打造的富文本及一套适用于web后台的ui框架,在gitee上受到网友们的关注,部分网友对我采用jquery的技术栈提出了质疑.总结起来:无非是jquery已 ...

  8. Vue tinymce富文本编辑器

    tinymce 官方为 vue 项目提供了一个组件 tinymce-vue 一.安装tinymce-vue npm install @tinymce/tinymce-vue -S 二.下载tinymc ...

  9. vue v-html 富文本解析 空格,换行,图片大小问题

    1.保留空格,换行属性 //保留换行空格问题 white-space: pre-wrap; 2.超出部分,强制换行,一般用于数字 //富文本换行 word-wrap: break-word; tabl ...

  10. WordPress调用特色图片地址源,去除特色图片img标签其他样式

    我们在制作WordPress主题时候想要给wordpress特色图片,这也是为了更加的美观,但是我们直接使用wordpress特色图片引用代码的时候却发现,出现下面的情况. wordpress特色图片 ...

随机推荐

  1. ElasticSearch分布式搜索引擎——从入门到精通

    ES分布式搜索引擎 注意: 在没有创建库的时候搜索,ES会创建一个库并自动创建该字段并且设置为String类型也就是text 什么是elasticsearch? 一个开源的分布式搜索引擎,可以用来实现 ...

  2. Python修改柱状图边缘柱子与图边界的距离

      本文介绍基于Python中matplotlib.pyplot模块,修改柱状图.条形图最两侧的柱子与图像边缘之间距离的方法.   最近,绘制了一个水平的柱状图,但是发现图的上.下边距(不是柱子与柱子 ...

  3. drf-day6——九个视图子类、视图集、路由系统、认证组件

    目录 一.九个视图子类 二.视图集 2.1 通过ModelViewSet编写5个接口 2.2 通过ReadOnlyModelViewSet编写2个只读接口 2.3 ViewSetMixin源码分析 总 ...

  4. 一把梭:REST API 全用 POST(转载)

    一把梭:REST API 全用 POST(转载) 原文链接: https://coolshell.cn/articles/22173.html 写这篇文章的原因主要还是因为V2EX上的这个贴子,这个贴 ...

  5. (二) MdbCluster分布式内存数据库——分布式架构1

    (二) MdbCluster分布式内存数据库--分布式架构1   分布式架构是MdbCluster的核心关键,业界有很多相关的实现,却很少有文章详细的解释每个架构实现背后的细节和这么做的原因.在Mdb ...

  6. vant组件,picker时间选择,自定义时间选择,实现datePacker,时间选择长期,增加长期选项,用于选择身份证到期时间等...

    vant组件,picker时间选择,自定义时间选择,实现datePacker,时间选择长期,增加长期选项,用于选择身份证到期时间等... 最近项目中有个需求,datePicker选项,需要实现增加一个 ...

  7. Error querying database. Cause: java.sql.SQLSyntaxErrorException: Unknown column 'xxx' in 'where clause'

    在使用Ruoyi管理系统中出现这个问题 Error querying database. Cause: java.sql.SQLSyntaxErrorException: Unknown column ...

  8. JDK、JRE、JVM三者之间的关系

    JDK.JRE.JVM 以下内容转载自JDK.JRE和JVM三者之间关系_geyouchao的博客-CSDN博客 侵删,谢谢 JDK:Java Development Kit (Java开发工具包) ...

  9. P4238 【模板】多项式乘法逆

    #include <cstdio> #include <iostream> #define re register using namespace std; typedef l ...

  10. LG P4148 简单题

    \(\text{Code}\) #include <cstdio> #include <iostream> #include <algorithm> #define ...