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特色图片 ...
随机推荐
- Python基本数据类型,用户交互,格式化输出,运算符,多种赋值方式,多种运算符
Python基本数据类型,用户交互,格式化输出,运算符,多种赋值方式,多种运算符 一.Python基本数据类型 1.回顾之前学过的基本数据类型 1.整型(整数) 应用场景:年级,班级人数,年份 代码实 ...
- JDK9对集合添加的优化-Debug追踪
JDK9对集合添加的优化 通常,我们在代码中创建一个集合(例如,List或Set ),并直接用一些元素填充它.实例化集合,几add方法调用,使得代码重复. package A_Lian_one.dem ...
- SqlServer服务中利用触发器对指定账户进行登录ip限制提升安全性
转眼间上次写文章已经是 2022年12月15日的事情啦,本来从2022年7月份开始写作之后保持着每周一篇,然而从12月15日后断更了这么久,经历了,隔离.阳.过年.从今天开始继续坚持写作,本片文章给大 ...
- Node.js学习笔记----day03
认真学习,认真记录,每天都要有进步呀!!! 加油叭!!! 一.Node中的模块系统 使用Node编写应用程序主要就是在使用 EcmaScript 和浏览器不一样的是,在Node中没有BOM.DOM 核 ...
- python基本数据类型与内置方法
1.数据类型内置方法理论 1.每一种数据类型本身都含有一系列的操作方法,内置方法是其本身自带的功能,是其中最多的. 2.python中数据类型调用的内置方法的统一句式为>>>:句点符 ...
- log4j 完美版配置
百度的LOG4J配置记录一下 目前无时间阅读,反正能用就行了 # priority :debug<info<warn<error #you cannot specify every ...
- Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 1x.x
出现问题原因: nodejs和node-sass版本不匹配 解决办法: 下载node-sass指定版本的nodejs 1)node-sass的节点版本支持政策 ① 支持的 Node.js版本因版本而异 ...
- 学习Java Day7
今天学习了if语句和C/C++基本无差异,也再次练了一下Java的输入
- 【KAWAKO】DTLN-1Dconv的原理
目录 前言 怎么理解DTLN的第二部分呢 对1D卷积的具体理解 1D卷积相较于STFT的优缺点 优点 缺点(不太确定) 参考文献 前言 DTLN是一种能够实时处理的语音降噪算法,其开源代码在这里,论文 ...
- 题解 [SHOI2002] 百事世界杯之旅
其实做这道题还蛮难受的...因为这个每一次有无限种可能我有钱我可以去买无限瓶可乐啊但是不是可口我不是很赞同┓( ´∀` )┏ 然后参考了这篇题解发现错位相减这样的方法,让我们一起膜拜 Butterfl ...