当前位置: 首页 > news >正文

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左右添加和修改东西

相关文章:

js遇到需要正则匹配来修改img标签+清除行内样式

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

Vue学习v-if与v-else-if

Vue学习v-if与v-else-if 一、前言1、v-if2、v-else-if3、v-else4、示例 一、前言 v-if 和 v-else-if 是 Vue.js 中用于条件渲染的指令&#xff0c;它们通常与 v-else 一起使用。下面我来详细解释一下它们的用法和区别&#xff1a; 1、v-if 用法&#xff1a;v-if 是一个指令&…...

linux进阶高级配置,你需要知道的有哪些2-firewalld防火墙(一)

1、防火墙的技术上分类&#xff1a; 包过滤&#xff1a;firewalld属于这种 应用代理&#xff1a; 状态检测&#xff1a;ASA 2、firewalld的两种配置模式&#xff1a; 运行时配置 &#xff1a;立即生效 永久配置&#xff1a;重新加载服务生效 3、常用的区域&#xff1a; trust…...

Centos 中如何汉化man命令

刚学Linux&#xff0c;记不住命令和选项&#xff0c;很依赖里面的 man 查看命令&#xff0c;但因为着实看不懂&#xff0c;有没有什么办法把man查看命令的信息改成中文 在CentOS 7中&#xff0c;你可以通过安装man-pages-zh包来获取中文的man手册。以下是具体的步骤&#xff1a…...

原生小程序开发如何使用 tailwindcss

原生小程序开发如何使用 tailwindcss 原生小程序开发如何使用 tailwindcss 前言什么是 weapp-tailwindcss ?0. 准备环境以及小程序项目1. 安装与配置 tailwindcss 0. 使用包管理器安装 tailwindcss1. 在项目目录下创建 postcss.config.js 并注册 tailwindcss2. 配置 tailwind…...

spring alibaba中的seata分布式事务

Seata AT 模式设计思路 一阶段&#xff1a;业务数据和回滚日志记录在同一个本地事务中提交&#xff0c;释放本地锁和连接资源。 核心在于对业务sql进行解决解析&#xff0c;转换成undolog&#xff0c;并同时入库存 二阶段&#xff1a; 提交异步化&#xff0c;非常快速地完成…...

MQTT学习(二)

订阅主题和订阅确认 SUBSCRIBE——订阅主题 之前的CONNECT报文&#xff0c;分为 固定报头&#xff1a;必须存在&#xff0c;用于描述报文信息。里面有指出什么类型的报文&#xff0c;报文的等级。可变报头&#xff1a;不一定存在。主要看什么样子类型的报文。有效载荷部分&a…...

入职Java,不会git被开除了。。。

入职Java&#xff0c;不会git被开除了。。。 文章目录 入职Java&#xff0c;不会git被开除了。。。前言一、Git是什么&#xff1f;二、Git的核心概念三、Git的工作流程四、Git的常用命令五、总结 &#x1f308;你好呀&#xff01;我是 山顶风景独好 &#x1f49d;欢迎来到我的博…...

Mysql 隔离级别

MySQL的事务隔离级别是指在处理并发事务时&#xff0c;为保证数据的一致性和事务的独立性&#xff0c;数据库系统提供的不同级别控制策略。根据ACID特性中的隔离性&#xff08;Isolation&#xff09;&#xff0c;MySQL支持四种标准的事务隔离级别&#xff0c;每种级别有不同的并…...

每日一学—K邻算法:在风险传导中的创新应用与实践价值

文章目录 &#x1f4cb; 前言&#x1f3af; K邻算法的实践意义&#x1f3af; 创新应用与案例分析&#x1f525; 参与方式 &#x1f4cb; 前言 在当今工业领域&#xff0c;图思维方式与图数据技术的应用日益广泛&#xff0c;成为图数据探索、挖掘与应用的坚实基础。本文旨在分享…...

基于Springboot的校园疫情防控信息管理系统(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的校园疫情防控信息管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层…...

【C++】内联函数、auto、范围for

文章目录 1.内联函数2.auto关键字2.1auto简介2.2auto的注意事项2.3auto不能推导的场景 3.基于范围的for循环(C11)4.指针空值nullptr(C11) 1.内联函数 概念&#xff1a; 以inline修饰的函数叫做内联函数&#xff0c;编译时C编译器会在调用内联函数的地方展开&#xff0c;没有函…...

Day 46 139.单词拆分

单词拆分 给定一个非空字符串 s 和一个包含非空单词的列表 wordDict&#xff0c;判定 s 是否可以被空格拆分为一个或多个在字典中出现的单词。 说明&#xff1a; 拆分时可以重复使用字典中的单词。 你可以假设字典中没有重复的单词。 示例 1&#xff1a; 输入: s “leet…...

streamlit报错:AxiosError: Request failed with status code 403

解决办法&#xff1a; 步骤一&#xff1a;创建config.toml vi ~/.streamlit/config.toml 步骤二&#xff1a;加入以下内容 [server] enableXsrfProtection false enableCORS false步骤三&#xff1a;重新启动你的streamlit网页...

java基础教学 |Java Stream API详解

Java Stream API 是Java 8引入的一个重要特性&#xff0c;它为集合对象提供了一种新的计算模型&#xff0c;使得开发者能够以声明性的方式处理数据集合。Stream API 不仅提高了代码的可读性和简洁性&#xff0c;还极大地优化了并行处理能力&#xff0c;让复杂的集合操作变得高效…...

0.0和0.00竟然不相等!!!BigDecimal别用错了比较方式

对于BigDecimal字段&#xff0c;可以使用compareTo()方法和equals()方法进行比较。但是要注意这两种方法的作用有所不同。一般都应该使用BigDecimal比较值&#xff0c;而不是使用经常用到的equals方法比较内容。 1.compareTo()方法 是用来比较两个BigDecimal对象的大小关系。…...

【多模态】30、Monkey | 支持大尺寸图像输入的多任务多模态大模型

文章目录 一、背景二、方法2.1 Enhancing Input Resolution2.2 Multi-level Description Generation2.3 Multi-task Training 三、效果3.1 Image Caption3.2 General VQA3.3 Scene Text-centric VQA3.4 Document-oriented VQA3.5 消融实验3.6 可视化 论文&#xff1a;Monkey : …...

PHP黑魔法之md5绕过

php本身是一种弱语言,这个特性决定了它的两个特点: 输入的参数都是当作字符串处理变量类型不需要声明,大部分时候都是通过函数进行类型转化php中的判断有两种: 松散比较:只需要值相同即可,类型不必相同,不通类型比较会先转化为同类型,比如全数字字符串和数字比较,会比…...

【适用全主题】WordPress原创插件:弹窗通知插件 支持内容自定义

内容目录 一、详细介绍二、效果展示1.部分代码2.效果图展示 三、学习资料下载 一、详细介绍 适用于所有WordPress主题的弹窗插件 一款WordPress原创插件&#xff1a;弹窗通知插件 支持内容自定义 二、效果展示 1.部分代码 代码如下&#xff08;示例&#xff09;&#xff1…...

定时器的理论和使用

文章目录 一、定时器理论1.1定时器创建和使用 二、定时器实践2.1周期触发定时器2.2按键消抖 一、定时器理论 定时器是一种允许在特定时间间隔后或在将来的某个时间点调用回调函数的机制。对于需要周期性任务或延迟执行任务的嵌入式应用程序特别有用。 软件定时器&#xff1a; …...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...

保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画!!!

目录 补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现 内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示 逐帧…...

6.9-QT模拟计算器

源码: 头文件: widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMouseEvent>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);…...

在Zenodo下载文件 用到googlecolab googledrive

方法&#xff1a;Figshare/Zenodo上的数据/文件下载不下来&#xff1f;尝试利用Google Colab &#xff1a;https://zhuanlan.zhihu.com/p/1898503078782674027 参考&#xff1a; 通过Colab&谷歌云下载Figshare数据&#xff0c;超级实用&#xff01;&#xff01;&#xff0…...

Qt Quick Controls模块功能及架构

Qt Quick Controls是Qt Quick的一个附加模块&#xff0c;提供了一套用于构建完整用户界面的UI控件。在Qt 6.0中&#xff0c;这个模块经历了重大重构和改进。 一、主要功能和特点 1. 架构重构 完全重写了底层架构&#xff0c;与Qt Quick更紧密集成 移除了对Qt Widgets的依赖&…...