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特色图片 ...
随机推荐
- Z-Blog后台getshell
Z-Blog后台getshell 本人所有文章均为技术分享,均用于防御为目的的记录,所有操作均在实验环境下进行,请勿用于其他用途,否则后果自负. 0x00 环境部署 文件下载地址 打开phpstudy ...
- Python风格规范(转载)
Python风格规范(转载) https://zh-google-styleguide.readthedocs.io/en/latest/google-python-styleguide/python ...
- 力扣每日一题2023.1.19---2299. 强密码检验器 II
如果一个密码满足以下所有条件,我们称它是一个 强 密码: 它有至少 8 个字符. 至少包含 一个小写英文 字母. 至少包含 一个大写英文 字母. 至少包含 一个数字 . ...
- Spring boot 3.0 日志
spring boot 3.0 已经自己集成了日志功能 logback SpringBoot 启动时自动加载配置文件,配置文件的默认名称为: logback.xml 或 logback-test.x ...
- Linux07-常用命令-权限
1.组 1.1基本说明 在linux中的每个用户必须属于一个组,不能独立于组外.在linux中每个文件有所有者.所在组.其它组的概念. 1) 文件所有者 谁创建的这个文件,文件的所有者就是谁 2) 文 ...
- Kali Linux Web 渗透测试秘籍 中文版
第一章 配置 Kali Linux 简介 在第一章中,我们会涉及如何准备我们的 Kali 以便能够遵循这本书中的秘籍,并使用虚拟机建立带有存在漏洞的 Web 应用的实验室. 1.1 升级和更新 Kal ...
- 【TS】泛型以及多个泛型参数
泛型 给函数或者属性定义类型的时候,类型是固定的,当业务发生变动时可能不好维护,例如:函数类型固定为string,后续需求更改不好维护,比如需要传入number类型,那么这个函数就不适用了 funct ...
- JavaScript数组的方法大全(最新)
JavaScript数组方法大全 趁着有时间,总结了下数组所有的属性和方法,记录博客,便于后续使用 array.at() at方法,用于获取数组中,对应索引位置的值,不能修改. 语法:array.at ...
- CCRD总目录(2007年至今,动态更新中)
中信国健临床通讯总目录 (动态更新.末次更新: 2015-07-06) 年份 目录网址 2010年 1.2010年第01期 (或者浏览有备注的目录: 2010年第01期 ) 2. 2010年第02期 ...
- 微信小程序防止多次点击提交的方法
Page({ data: { lock: false }, //表单提交 submit(){ let that = this; let {lock} = that.data; if(!lock){ t ...