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特色图片 ...
随机推荐
- css之transform属性的使用
1.定义:Transform属性应用于元素的2D或3D转换.这个属性允许你将元素旋转,缩放,移动,倾斜等. 2.常用的属性值: (1)translate(移动): 这个属性值里面含有三个参数,依次 ...
- windows消息处理机制
三层机制 1.顶端就是Windows内核.Windows内核维护着一个消息队列,第二级控制中心从这个消息队列中获取属于自己管辖的消息,后做出处理,有些消息直接处理掉,有些还要发送给下一级窗体(Wind ...
- 真正“搞”懂HTTP协议11之代理服务
代理,其实全称应该叫做代理服务器,它是客户端与服务器之间得中间层,本质上来说代理就是一个服务器,在HTTP的链路中插入的一个中间环节,就是代理服务器啦.所谓的代理服务就是指:服务本身不生产内容,而是处 ...
- SQL优化的七个方面
SQL优化的七个方面 1. 创建索引 禁止给表中每一列都建立单独索引 每个Innodb表都必须有一个主键 要注意组合索引的字段顺序 优先考虑覆盖索引 避免使用外键约束 2. 避免索引失效 失效场景: ...
- Portainer功能使用之开启远程访问
配置远程连接Docker服务 1.配置 说明:docker默认没有打开"2375"端口,需要先进行配置开启端口 命令 修改配置:vim /usr/lib/systemd/syste ...
- xshell连接时显示“服务器发送了一个意外的数据包。received:3,expected:20“问题的解决方法
xshell连接时显示"服务器发送了一个意外的数据包.received:3,expected:20"问题的解决方法 解决方法:在/etc/ssh/sshd_config最后增加以下 ...
- 代码随想录算法训练营day09 | leetcode 28. 实现 strStr()
LeetCode 28. 实现 strStr() 牢记一点:next[i] 元素表示[0,i]子串的最长相等前后缀个数,也是模式串与主串匹配不相等时模式串的下一个比较索引 分析1.0 前缀是指不包含最 ...
- .Net依赖注入、控制反转
依赖项是指另一个对象所依赖的对象. 使用其他类所依赖的 WriteMessage 方法检查以下 MyDependency 类: public class MyDependency { public ...
- idea导入tomcat8源码搭建源码调试环境
从apache tomcat下载tomcat8源码 1.下载到源码后,tomcat默认使用ant作为包管理工具,本地调试时创建pom.xml, 手动创建一个pom.xml放入源码根目录 <?xm ...
- No.1.9
项目样式补充 精灵图(场景:项目中将多张小图片,合并成一张大图片,这张大图片称之为精灵图) (优点:减少服务器发送次数,减轻服务器的压力,提高页面加载速度) 精灵图的使用步骤:1.创建一个盒子,设置盒 ...