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. ATM项目开发

    目录 一.项目开发流程 1.项目需求分析: 2.项目架构设计: 3.项目分组开发: 4.项目提交测试: 5.项目交付上线: 二.项目需求分析 1.主题 2.项目核心 3.项目需求: 4.从需求中提炼出 ...

  2. 数字游戏(NOIP 2003 PJT2)

    一 原始数据处理 1.输入数据得到a[1]~a[n],复制扩展a[n+1]~a[2*n],以便处理不同点为起点出发. cin>>n>>m; for(int i=1;i<= ...

  3. Cow Picnic S 更新了(在后面)

    解题思路: 从每头奶牛的节点开始做搜索,用dfs走遍所有路径(走到底,不回头).每遍历到一个节点该节点遍历次数就加一,最后所有奶牛都搜索完之后,检查每个节点的遍历次数,如果该节点的遍历次数等于奶牛数则 ...

  4. .NET 支付宝SDK新版 AlipayEasySDK 配置文件详细说明

    config代码: using Tea; namespace Alipay.EasySDK.Kernel { /// <summary> /// 客户端配置参数模型 /// </su ...

  5. cv::Mat::step详解

    1.简介 step的几个类别区分: step:矩阵第一行元素的字节数 step[0]:矩阵第一行元素的字节数 step[1]:矩阵中一个元素的字节数 step1(0):矩阵中一行有几个通道数 step ...

  6. 视觉十四讲:第六讲_g2o图优化

    g2o是一个基于图优化的库,图优化是把优化问题表现为一种图的方式.一个图由若干个顶点和边组成. 顶点表示优化变量,边表示误差项. g2o的使用步骤: 1.定义顶点和边的类型: 2.构建图: 3.选择优 ...

  7. 自动化测试方案对比:Katalon vs Python

    公司要用katalon做自动化,我提议用更加主流的python的方案,即pytest+selenium.下面是做一个大概的对比,以引导团队尽可能的选择可靠的方案. 接下来我直接把我当时讲的ppt贴上来 ...

  8. JZOJ 4754.矩阵

    \(\text{Problem}\) \(\text{Solution}\) 纪念我考场正解被二分暴力暴踩... 首先二分的话,显然可以二分出答案,然后数矩阵和大于等于本矩阵的是否有 \(k\) 个 ...

  9. Shell命令-基础

    Shell命令 1 变量 定义变量时,变量名不加美元符号$,注意,变量名和等号之间不能有空格 a="myname" 用语句给变量赋值时, for file in `ls /etc` ...

  10. select加下拉箭头

    <div class="flex"> <label>城市</label> <div class="dealerbo"& ...