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. Z-Blog后台getshell

    Z-Blog后台getshell 本人所有文章均为技术分享,均用于防御为目的的记录,所有操作均在实验环境下进行,请勿用于其他用途,否则后果自负. 0x00 环境部署 文件下载地址 打开phpstudy ...

  2. Python风格规范(转载)

    Python风格规范(转载) https://zh-google-styleguide.readthedocs.io/en/latest/google-python-styleguide/python ...

  3. 力扣每日一题2023.1.19---2299. 强密码检验器 II

    如果一个密码满足以下所有条件,我们称它是一个 强 密码:    它有至少 8 个字符.    至少包含 一个小写英文 字母.    至少包含 一个大写英文 字母.    至少包含 一个数字 .    ...

  4. Spring boot 3.0 日志

    spring boot 3.0 已经自己集成了日志功能  logback SpringBoot 启动时自动加载配置文件,配置文件的默认名称为: logback.xml 或 logback-test.x ...

  5. Linux07-常用命令-权限

    1.组 1.1基本说明 在linux中的每个用户必须属于一个组,不能独立于组外.在linux中每个文件有所有者.所在组.其它组的概念. 1) 文件所有者 谁创建的这个文件,文件的所有者就是谁 2) 文 ...

  6. Kali Linux Web 渗透测试秘籍 中文版

    第一章 配置 Kali Linux 简介 在第一章中,我们会涉及如何准备我们的 Kali 以便能够遵循这本书中的秘籍,并使用虚拟机建立带有存在漏洞的 Web 应用的实验室. 1.1 升级和更新 Kal ...

  7. 【TS】泛型以及多个泛型参数

    泛型 给函数或者属性定义类型的时候,类型是固定的,当业务发生变动时可能不好维护,例如:函数类型固定为string,后续需求更改不好维护,比如需要传入number类型,那么这个函数就不适用了 funct ...

  8. JavaScript数组的方法大全(最新)

    JavaScript数组方法大全 趁着有时间,总结了下数组所有的属性和方法,记录博客,便于后续使用 array.at() at方法,用于获取数组中,对应索引位置的值,不能修改. 语法:array.at ...

  9. CCRD总目录(2007年至今,动态更新中)

    中信国健临床通讯总目录 (动态更新.末次更新: 2015-07-06) 年份 目录网址 2010年 1.2010年第01期 (或者浏览有备注的目录: 2010年第01期 ) 2.  2010年第02期 ...

  10. 微信小程序防止多次点击提交的方法

    Page({ data: { lock: false }, //表单提交 submit(){ let that = this; let {lock} = that.data; if(!lock){ t ...