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

这篇具有很好参考价值的文章主要介绍了正则替换html img中的style width和height。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

推荐一个正则匹配的网站 https://regex101.com/文章来源地址https://www.toymoban.com/news/detail-604863.html

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);


到了这里,关于正则替换html img中的style width和height的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 在SVG.js中设置元素大小很简单,调用resize()、size()、width()、height()和attr()的方法

    SVG.js是一款基于JavaScript的强大的图形库,可以创建和操作SVG元素。SVG是可伸缩矢量图形的缩写,即矢量图像,它由矢量图形对象组成,可以无损放大或缩小而不失真。在SVG.js中设置元素大小是非常重要的一部分,因为这样可以使您的图形适应不同屏幕分辨率和大小。本文将探

    2024年02月03日
    浏览(46)
  • opencv error: (-215:Assertion failed) size.width>0 && size.height>0 in function ‘cv::imshow‘

    问题:因为读入图片的宽和高至少有一个不大于0。可以说就是没有读入图片 原因分析:路径出错或没有图片 1.路径里面有中文 ,opencv-python不支持直接读取中文路径,把 图片路径改成英文或把图片换一个路径就行。 如果需要改成中文路径的话可以参考【opencv】实现中文路径

    2024年02月02日
    浏览(70)
  • 前端随笔:HTML/CSS/JavaScript和Vue

    最近因为工作需要,需要接触一些前端的东西。之前虽然大体上了解过 HTML 、 CSS 和 JavaScript ,也知道 HTML 定义了内容、 CSS 定义了样式、 JavaScript 定义了行为,但是却没有详细的学习过前端三件套的细节。而最近的工作中需要使用 Vue ,并且想到未来的工作中使用 Vue 能够更

    2024年02月16日
    浏览(44)
  • 使用skvideo.io.vread读取avi视频,报错“No way to determine width or height from video...”

    问题描述: 一开始安装sk-video,在使用skvideo.io.vread读取avi视频,报错“No way to determine width or height from video. Need `-s` in `inputdict`. Consult documentation on I/O.” 解决方案: 1. 卸载sk-video 2. 安装skicit-video 3. 安装ffmpeg 4. 查看ffmpeg存储路径 5. 测试是否安装成功 成功!!!正确输出avi视

    2024年02月10日
    浏览(38)
  • element-ui设置高度height属性与style属性设置的区别

    在 element-ui 表格中,可以通过 style 属性和 heigh t属性来设置表格的高度。这两种方式的区别如下: 使用 style 属性可以设置表格容器的样式,包括高度、宽度、边框等。例如: 这里将表格容器的高度设置为 300px ,表格的高度是固定的,如果表格内容高度超过了 300px ,不会出

    2024年02月07日
    浏览(51)
  • opencv调用摄像头报错(-215:Assertion failed) size.width>0 && size.height>0 in function ‘cv::imshow‘

    我使用OpenCV调用摄像头时报错: 问题分析如下: error提示断言失败了,因为读入图片的宽和高至少有一样不大于0。 报错代码如下: 改进方案: 运行结果: Nice!顺利运行! 备注: 我在CSDN找到了许多方法,但都未得到解决,最终请教大佬得已解决,与遇到相同问题的诸位分

    2024年02月12日
    浏览(51)
  • echarts警告:Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight. ........

    具体警告:Can\\\'t get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload  出现问题:切换tabs初始化不同的echarts,显示不出来 报错的大致意思就是:不能找到dom节点的宽高,宽高获取不了导致绘制不出图

    2024年02月16日
    浏览(102)
  • Unity3d UI上挂载Content Size Fitter组件后用rect获取的UI的width和height

    通常获取UI的宽和高,一般使用GetComponentRectTransform().rect.height或GetComponentRectTransform().rect.width,但是使用Content Size Fitter布局后会获取不到对应的值( 获取为0 ),此时强制刷新一下布局再获取即可。  刷新完再使用 GetComponentRectTransform().rect 获取。 若是 Text 文本,上面的方法可

    2024年02月15日
    浏览(44)
  • 解决OpenCV Error: Assertion failed (ssize.width > 0 && ssize.height > 0) in cv::resize, file C:\proj

    目录 解决OpenCV Error: Assertion failed (ssize.width 0 ssize.height 0) in cv::resize, file C:proj 1. 图像尺寸错误 2. 数据类型错误 3. 图像通道数错误 4. 其他可能的原因 解决方法 当我们在使用OpenCV进行图像处理时,有时候会遇到如下错误信息:OpenCV Error: Assertion failed (ssize.width 0 ssize.height 0) i

    2024年03月17日
    浏览(46)
  • 前端html中让两个或者多个div在一行显示,用style给div加上css样式

    DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。DIV在编程中又叫做整除,即只得商的整数。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。 我们知道,默认情况下每个div都是单独一

    2024年02月14日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包