vue去除富文本的标签和样式
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;
};
<div class="rich" v-html="removeHtmlStyle(teacherData.teacher_intro)"></div>
vue去除富文本的标签和样式的更多相关文章
- vue修改富文本中的元素样式
富文本编辑器目前应用很广泛,而有时候我们想要对其中的一些元素的样式进行修改,就会遇到问题. 首先,直接修改是不可行的,因为是用v-html标签进行渲染的,无法直接获取到. 在修改的时候,一般是按标签进 ...
- 去除富文本中的html标签及vue、react、微信小程序中的过滤器
在获取富文本后,又只要显示部分内容,需要去除富文本标签,然后再截取其中一部分内容:然后就是过滤器,在微信小程序中使用还是挺多次的,在vue及react中也遇到过 1.富文本去除html标签 去除htm ...
- 【转载】Asp.Net MVC网站提交富文本HTML标签内容抛出异常
今天开发一个ASP.NET MVC网站时,有个页面使用到了FCKEditor富文本编辑器,通过Post方式提交内容时候抛出异常,仔细分析后得出应该是服务器阻止了带有HTML标签内容的提交操作,ASP. ...
- 【转载】 Asp.Net MVC网站提交富文本HTML标签内容抛出异常
今天开发一个ASP.NET MVC网站时,有个页面使用到了FCKEditor富文本编辑器,通过Post方式提交内容时候抛出异常,仔细分析后得出应该是服务器阻止了带有HTML标签内容的提交操作,ASP. ...
- vue项目富文本编辑器vue-quill-editor之自定义图片上传
使用富文本编辑器的第一步肯定是先安装依赖 npm i vue-quill-editor 1.如果按照官网富文本编辑器中的图片上传是将图片转为base64格式的,如果需要上传图片到自己的服务器,需要修改 ...
- Vue之富文本tinymce爬坑录
前言 最近因业务需求在项目中嵌入了tinymce这个富文本编辑器,用于满足平台给用户编辑各类新闻内容什么的业务需求,前后也花了不少时间体验和对比了市面上各类开源编辑器. *案例demo版本:vue-t ...
- Jquery会死吗?我为什么不用vue写富文本!
一.事件背景: 我最近开源了一个个人耗时半年打造的富文本及一套适用于web后台的ui框架,在gitee上受到网友们的关注,部分网友对我采用jquery的技术栈提出了质疑.总结起来:无非是jquery已 ...
- Vue tinymce富文本编辑器
tinymce 官方为 vue 项目提供了一个组件 tinymce-vue 一.安装tinymce-vue npm install @tinymce/tinymce-vue -S 二.下载tinymc ...
- vue v-html 富文本解析 空格,换行,图片大小问题
1.保留空格,换行属性 //保留换行空格问题 white-space: pre-wrap; 2.超出部分,强制换行,一般用于数字 //富文本换行 word-wrap: break-word; tabl ...
- WordPress调用特色图片地址源,去除特色图片img标签其他样式
我们在制作WordPress主题时候想要给wordpress特色图片,这也是为了更加的美观,但是我们直接使用wordpress特色图片引用代码的时候却发现,出现下面的情况. wordpress特色图片 ...
随机推荐
- 认知篇:CQRS架构模式的本质
作者:京东科技 倪新明 CQRS只是一种非常简单的模式(pattern),CQRS本身并不是一种架构风格,和最终一致性/消息/读写分离/事件溯源/DDD等没有必然的联系,它最大优势是给我们带来更多的架 ...
- BBS登录与注册功能的总结
BBS登录与注册功能的总结 一.表设计:表名 外键字段 表名 models.py from django.db import models from django.contrib.auth.model ...
- 字符编码,存储引擎及MySQL字段类型相关知识点
字符编码,存储引擎及MySQL字段类型相关知识点 一.字符编码 1.在终端输入\s,查看数据库的基本信息(当前用户,版本,编码,端口号) 2.默认的配置文件是my-default.ini 拷贝上述的文 ...
- 一幅图像为f=[1 4 7;2 5 8;3 6 9],设kx=1.8,ky=1.3,试采用最邻近插值对其进行放大,写出新图像矩阵。
一幅图像为f=[1 4 7;2 5 8;3 6 9],设kx=1.8,ky=1.3,试采用最邻近插值对其进行放大,写出新图像矩阵.(请写出解题步骤,并编写程序进行结果验证) 参考 matlab代码如下 ...
- Python读取大量Excel文件并跨文件批量计算平均值
本文介绍基于Python语言,实现对多个不同Excel文件进行数据读取与平均值计算的方法. 首先,让我们来看一下具体需求:目前有一个文件夹,其中存放了大量Excel文件:文件名称是每一位同学的 ...
- Java的两个好用的工具包 Apache commons
Apache commons 介绍 这是apache commons lang3的工具类的截图 这个工具,小皮一般用在业务层较多 这是apache commons codec下面的工具 这个工具包,今 ...
- 1.初识 Django
设计模式 定义 # mysite/news/models.py from django.db import models class Reporter(models.Model): full_name ...
- 题解 Trie 但是你要最小化它的节点数量
名字瞎取的 Description 给定 \(n\) 个字符串 \(s\),可以对 \(s_i\) 的字符打乱,将这些字符串加入一个 trie 里面求节点数量最小值. \(n\le 16, \sum ...
- Linux 下安装Nginx两种方法- yum安装 and Centos7下yum安装配置nginx与php
转载csdn: Linux 下安装Nginx两种方法- yum安装_在电脑前深思的博客-CSDN博客 Linux安装Nginx(两种方式)_HHRunning的博客-CSDN博客_linux 是否安装 ...
- angular - 另一个ID为#######的进程当前正在运行ngcc
angular项目启动时报错 首先尝试npm install再次运行,看看它是否可以解决您的问题. 尝试ngcc手动运行. 删除这个文件 node_modules/@angular/compiler- ...