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. BBS登录与注册功能的总结

    BBS登录与注册功能的总结 一.表设计:表名 外键字段 表名 models.py from django.db import models from django.contrib.auth.model ...

  2. wangeditor富文本编辑和vue3

    官网: wangEditor  https://www.wangeditor.com/v5/ 为啥用这个富文本编辑器(我觉得官网写自己优势已经非常好了没有啥可补充的了) 文档特别的全和友好 安装 ya ...

  3. 《Terraform 101 从入门到实践》 Functions函数

    <Terraform 101 从入门到实践>这本小册在南瓜慢说官方网站和GitHub两个地方同步更新,书中的示例代码也是放在GitHub上,方便大家参考查看. Terraform的函数 T ...

  4. springboot框架返回日期值少一天

    1 问题 一个请求,返回一个对象,对象里面有日期,返回的对象的日期却比实际的日期少了一天 如下图:在return返回的时候查看返回的对象的日期的值 postman返回的结果如下图,几个日期都少了一天 ...

  5. 精美的web前端源码的特效

    1.JS自定义烟花特效 这是一款基于JS和Canvas的自定义烟花特效,初始化界面的时候特效是不带声效的绽放,当你点击顶部中间的播放,即可以看到美丽的烟火也可以听到烟花绽放的声音,让你脑海浮现过年团圆 ...

  6. SQL处理数据库表特殊字符

    替换回车换行:REPLACE(REPLACE(REPLACE('字符串', CHAR(13) + CHAR(10) , '<br />'), CHAR(13), '<br /> ...

  7. 我让 ChatGPT 写了个 ChatGPT

    这家伙实在是火得过头了,索性讲个它的故事. 去年11月份,OpenAI 推出了 ChatGPT.  这里就不赘述这个家喻户晓玩意的常识了. 要说刚开始也没多少人在意,一个聊天机器人-- 谁稀罕呐. 但 ...

  8. Seleniumweb自动化测试01

    1.selenium简介 selenium是python的一个web第三方包,主要使用来做web自动化测试的 环境要求: ①.要有谷歌浏览器 ②.下载谷歌浏览器的驱动chromedriver(驱动我们 ...

  9. Terraform基础入门 (Infrastructure as Code)

    highlight: idea theme: awesome-green 前言 像写代码一样管理基础设施. Terraform 使用较为高级的配置文件语法来描述基础设施,这个特性让你对配置文件进行版本 ...

  10. 基于GLUT的PyOpenGL的使用

    1. GLUT概述 OpenGL只是一种规范,不仅语言无关,而且平台无关.规范只字未提获得和管理OpenGL上下文相关的内容,而是将这些作为细节交给底层的窗口系统.出于同样的原因,OpenGL纯粹专注 ...