正则替换html img中的style width和height

推荐一个正则匹配的网站 https://regex101.com/

let str ='有四只小动物排成一排,摄影师给相邻的两只小动物拍了下面三张照片。<img style="vertical-align: middle; width: 712px; height: 99.0337px;" width="1317" height="183" src="http://test.baidu.com/test.png" /><br />​(<span class="brack">&nbsp;</span>)排在最左边,(<span class="brack">&nbsp;</span>)排在最右边。';// 使用正则表达式匹配style中的width样式,并将大于375的部分替换为375px
let result = str.replace(/(<img[^>]*style="[^"]*?)(\bwidth\s*:\s*\d+[^;"]*?px;)(\s?height\s*:\s*\d+[^;"]*?px;)([^<]*\/>)/gi,function (match, p1, p2, p3, p4) {console.log("🚀 ~ file: test.js:8 ~ p4:", p4);console.log("🚀 ~ file: test.js:8 ~ p3:", p3);console.log("🚀 ~ file: test.js:8 ~ p2:", p2);console.log("🚀 ~ file: test.js:8 ~ p1:", p1);console.log("🚀 ~ file: test.js:8 ~ match:", match);let widthValue = parseInt(p2.match(/\d+/)[0]);let heightValue = parseInt(p3.match(/\d+/)[0]);if (widthValue > 375) {return p1 + "width: 375px; height: auto;" + p4;}return match; // 如果width小于等于375,则不做替换,保持原样}
);
console.log("🚀 ~ file: test.js:20 ~ result:", result);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/7515.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

正则表达式 —— Grep

文本处理三剑客&#xff1a;Grep、Sed、Awk 这三个工具都是基于对文本的内容进行增删改查的操作&#xff0c;此篇着重介绍grep与正则表达式的应用&#xff0c;以及扩展正则表达式。 正则表达式 什么是正则表达式&#xff1f; 它是由一类特殊字符以及文本字符所编写的一种模式…

华为云零代码平台AstroZero新手操作指南-3分钟体验创建培训报名表

华为云Astro轻应用Astro Zero是华为云为行业客户、合作伙伴、开发者量身打造的低代码/零代码应用开发平台&#xff0c;提供全场景可视化开发能力和端到端部署能力&#xff0c;可快速搭建行业和大型企业级应用并沉淀复用行业资产&#xff0c;加速行业数字化。 在AstroZero上&am…

程序员如何向老板提加薪?

今天的问题不仅适用于程序员&#xff0c;对于其他职业同样适用。如果你认为自己所做的工作应该得到更多的报酬&#xff0c;并且想为此做点什么&#xff0c;你有两个选择&#xff1a;找一个新的高薪工作或要求加薪。 这两种选择都会带来新的焦虑&#xff0c;但它们都会带来新的…

PostgreSQL还是MySQL:数据库选择指南

在当今数字化时代&#xff0c;数据库是支撑各类应用的重要基石&#xff0c;而在众多数据库管理系统中&#xff0c;PostgreSQL和MySQL是两个备受争议的选择。虽然它们都是成熟且功能强大的开源数据库&#xff0c;但它们在某些方面存在着不同的优势。本文将帮助你了解PostgreSQL和…

JVM执行引擎——为什么Java是半编译半解释语言

起初设计者的初衷是将字节码文件翻译为机器语言的指令来执行即可&#xff0c;就诞生了解释器。但是采用一行行来解释的效率比较低&#xff0c;JIT编译器会将编译后的机器码做一个缓存的操作&#xff0c;放在方法区的JIT代码缓存中&#xff0c;是否需要启用JIT编译器直接将字节码…

TypeScript基础篇 - Vue-TS-Rollup 环境实战

目录 .babelrc RollupVueTS scripts/rollup.config.js package.json 可以同时使用多个 Plugin 和 Preset&#xff0c;此时&#xff0c;它们的执行顺序非常重要。 先执行完所有 Plugin&#xff0c;再执行 Preset。 多个 Plugin&#xff0c;按照声明次序顺序执行。 多个 Pre…

gerrit 提交搞了一天的账号密码

搞了一整天的账号密码怎么输入都不对 以为输入了也不对&#xff0c;查找各种文档也不太行 参考也不太行&#xff1a; https://blog.csdn.net/qq_43279637/article/details/103595122 最后发现 是使用了git clone http 脑残方式&#xff0c;正确应该使用 git clone ssh 就可以…

菜鸟编程-python-正则表达式

目录 Python 正则表达式 re.match函数 re.search方法 re.match与re.search的区别 检索和替换

LLC和MAC子层的应用

计算机局域网标准IEEE802 由于局域网只是一个计算机通信网&#xff0c;而且局域网不存在路由选择问题&#xff0c;因此它不需要网络层&#xff0c;而只有最低的两个层次。然而局域网的种类繁多&#xff0c;其媒体接入控制的方法也各不相同。 为了使局域网中的数据链路层不致过…

指数函数exp

目录 指数函数及e 指数增长 复数指数 练习 1. expgui 2. 计算e 3 五角星绘制 指数函数及e &#xff08;1&#xff09;的比值总是常数 &#xff08;2&#xff09;的导数为其自身。&#xff08;根据比值1推导出e的值&#xff09; %% Plot a^t and its approximate derivat…

为什么重写equals方法时必须重写hashcode方法?

由于需要比较对象内容&#xff0c;所以我们通常会重写 equals 方法&#xff0c;但是重写 equals 方法的同时也需要重写 hashCode 方法&#xff0c;有没有想过为什么&#xff1f; 因为如果不这样做的话&#xff0c;就会违反 hashCode 的通用约定&#xff0c;从而导致该类无法结…

【ribbon】Ribbon的负载均衡和扩展功能

Ribbon的核心接口 参考&#xff1a;org.springframework.cloud.netflix.ribbon.RibbonClientConfiguration IClientConfig&#xff1a;Ribbon的客户端配置&#xff0c;默认采用DefaultClientConfigImpl实现。IRule&#xff1a;Ribbon的负载均衡策略&#xff0c;默认采用ZoneA…

iPortal 注册登录模块扩展开发

作者&#xff1a;yx 文章目录 前言一、示例代码简介二、对接 iPortal REST API 接口2.1、登录模块扩展开发2.2、注册模块扩展开发 三、页面内容及样式实现四、配置启用定制页面 前言 针对注册登录模块&#xff0c;iPortal 允许用户通过 iFrame 方式接入自行开发的页面&#xf…

macOS 下安装brew、nvm

1、brew&#xff1a; /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)" brew -v 查看版本 示例&#xff1a; 安装jdk brew search jdk 查询可用的jdk版本 brew install openjdk11 安装制定版本jdk 更换源&#xff1…

经典面试题(力扣,接雨水)

接雨水 方法一思路测试代码复杂度测试结果 方法二思路测试代码复杂度测试结果 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1]…

vue之vue-base组件

功能描述 业务页面基类组件,提供给业务开发的继承基类 #方法 初始化方法 init(); 校验表单 validateForm(); 事件绑定,可覆盖原有事件 bindEvent(event, bindfunction, target); 解绑事件 unbindEvent(event); 跳转路径 link(linkUrl); 参数输入,将全局管道中 (session\…

设计模式之迭代器模式

写在前面 本文一起看下一种行为型设计模式&#xff0c;迭代器模式。 1&#xff1a;介绍 1.1&#xff1a;什么时候使用迭代器设计模式 当对象的内部有一批数据&#xff0c;希望能够对外暴露访问&#xff0c;但因为如下的原因不希望外部直接访问内部的具体存储数据的元素&…

[JAVAee]线程安全

目录 线程安全的理解 线程不安全的原因 ①非原子性 ②可见性 ③代码重排序 体会何为不安全的线程 保证线程安全 一个代码在多线程的环境下就很容易出现错误. 线程安全的理解 线程安全是什么呢?通俗的来讲,线程安全就是在多线程的环境下,代码的结果是符合我们预期的,就…

MFC第二十一天 CS架构多页面开发与数据交互、CImageList图像列表介绍 、CListCtrl-SetItem设置列表项的方法

文章目录 CImageList图像列表介绍CListCtrl图标的原理CListCtrl列表图标设置CListCtrl-SetItem设置列表项的方法 CS架构多页面开发与数据交互添加用户实现向导多页数据交互pch.hCLientXq.h CAppCPage1.hCPage1.cppCPage2.hCPage2.cppCWorkerDlg .hCWorkerDlg.cpp 多页数据修改C…

【高危】Atlassian Confluence 远程代码执行漏洞

漏洞描述 Confluence 是由 Atlassian 开发的知识管理与协同软件&#xff0c;通常在企业内部用作wiki系统。 Confluence 7.19.8到8.2.0之前的版本中存在远程代码执行漏洞&#xff0c;具有登录权限的攻击者无需用户交互即可在 Confluence 服务器中执行任意命令。 漏洞名称Atlass…