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. Java 进阶P-4.6+P-4.7

    向上造型 造型cast 子类的对象可以赋值给父类的变量 注意! java中不存在对象对对象的赋值!! 父类的对象不能赋值给子类的变量 可以用造型: c=(Car) v; (只有当v这个变量实际管理的是 ...

  2. 关于计算机与常用DOS命令

    计算机 计算机 计算机由软件和硬件组成. 能够按照程序运行,自动,高速处理海量数据的现代化智能电子设备. 计算机硬件 CPU 主板 内存 电源.主机箱 硬盘 显卡 键盘.鼠标(输入设备) 显示器(输出 ...

  3. DNA

    思路一: 这题需要桶+哈希(简化版像A 1  B  2 ......) 具体: 先把数据输入 再枚举可能的右端点,再由右端点得到左端点(l和r相差k) 在 l到r 区间内将这一段区间哈希成一个4进制数 ...

  4. java 启动查看jar包加载顺序并设置classpath

    本文为博主原创,转载请注明出处: 1.idea查看jar包加载顺序 jdk8 可以通过     -XX:+TraceClassPaths    参数进行查看jar包的加载顺序 jdk11 可以通过  ...

  5. mysql15 sql优化-小表驱动大表 IN和EXITS

    转:https://blog.csdn.net/qq_27409289/article/details/85963089 1.IN查询分析 select * from a  where a.id in ...

  6. P11_组件-button和image组件的基本用法

    其它常用组件 button 按钮组件 功能比 HTML 中的 button 按钮丰富 通过 open-type 属性可以调用微信提供的各种功能(客服.转发.获取用户授权.获取用户信息等) image ...

  7. 可视化的容器镜像的图形管理工具Portainer【强烈推荐】

    Portainer是一个可视化的容器镜像的图形管理工具,利用Portainer可以轻松构建,管理和维护Docker环境. 而且完全免费,基于容器化的安装方式,方便高效部署. 官方站点:https:// ...

  8. Eureka+SpringCloud微服务(入门一)

    项目地址 [CloudStudy项目](zko0/cloudStudy: Springcloud学习工程 (github.com)) 1.依赖版本 cloud:Hoxton.SR1 boot:2.2. ...

  9. 网络继电器的EPICS IOC搭建

    http://www.corxnet.com/product/showproduct.php?id=36 https://item.taobao.com/item.htm?spm=a1z10.5-c- ...

  10. 逆天的Zstack-工控机上测试

    放假前一直在服务器上折腾Zstack跑数据库,调IOC.正好手头有个32G内存,intel i7处理器的工控机,就试试装Zstack跑跑看,想着即使重负荷的跑不了,跑跑docker之类的也行.装成功后 ...