(富文本常用)js遇到需要正则匹配来修改img标签+清除行内样式

简介: (富文本常用)js遇到需要正则匹配来修改img标签+清除行内样式

方法一、

var regex0 = new RegExp("(i?)(\<img)([^\>]+\>)", "gmi") //正则匹配表达式
this.newcontent = this.content.replace(regex0,"$2 style='display:block;margin: auto;width:120px;' $3")
//下面这个则需要在$2 $3左右添加和修改东西

这个正则表达式就是匹配所有的img标签//踩坑完毕,可以直接使用


第二行代码按自己需要改改


方法二、

遇到特殊的情况就是自带样式,那么方法一就不能用了,因为只会算是从原有字符串上面多加字符串


所以第一步,清楚原有行内样式

var regex0 = new RegExp("(i?)(\<img)([^\>]+\>)", "gmi") //正则匹配表达式
this.articleContent=this.articleContent.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
this.articleContent = this.articleContent.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
this.articleContent = this.articleContent.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');

第二步、清楚完所有的行内样式以后,再继续进行从新赋值行内样式

var regex0 = new RegExp("(i?)(\<img)([^\>]+\>)", "gmi") //正则匹配表达式
this.newcontent = this.content.replace(regex0,"$2 style='display:block;margin: auto;width:120px;' $3")
//下面这个则需要在$2 $3左右添加和修改东西


目录
相关文章
|
6月前
|
JavaScript 前端开发
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
|
22天前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
59 0
|
26天前
|
移动开发 前端开发 JavaScript
JavaScript 中的样式切换方法
JavaScript 中的样式切换方法
12 0
|
2月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
3月前
|
移动开发 前端开发 JavaScript
JavaScript 中的样式切换方法
JavaScript 中的样式切换方法
23 0
|
3月前
|
JavaScript 前端开发
使用 JavaScript 的 classList 方法轻松切换样式
使用 JavaScript 的 classList 方法轻松切换样式
31 0
|
4月前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
4月前
|
JavaScript
vue + d3.js(v6) 绘制【树状图/思维导图】可折叠/展开,可点击跳转,可带标签
vue + d3.js(v6) 绘制【树状图/思维导图】可折叠/展开,可点击跳转,可带标签
592 1
|
5月前
|
XML JavaScript 前端开发
如何在JavaScript中设置多个样式属性?
【6月更文挑战第29天】如何在JavaScript中设置多个样式属性?
442 3
|
5月前
|
JavaScript
JS图表生成以及点击修改图表样式
JS图表生成以及点击修改图表样式