js获取html中的img标签,图片标签,提取src属性并替换操作

场景:

获取HTML中的所有图片标签,并把图片的src属性替换成webp图片, 若浏览器支持webp,则展示,不支持走onerror函数展示data-original原图。

复制代码
function getDetailWebp(htmlStr, width= 600){
      if(!htmlStr) return '';
      var reg = /<img[^>]+src=[\'|\"]?([^(?"|?'|?>)]+)[\'|\"]?[^>]*>/gi;
      if(!reg.test(htmlStr)) return htmlStr; // 内容中无图直接返回不用处理
      return htmlStr.replace(reg, function($0, $1){
          if($0.indexOf('data-original') != -1) return $0;  // 如果图片标签上有这个属性,那这个可能是接口或者自己已经处理过的不需要重复处理,返回即可;
          return $0.replace($1, imageToWebp($1, width)).replace(/\/?>/, ` data-original="${$1}" onerror="loadImageError(this)"/>`)
      })
    }

图片正则:

复制代码
var imgReg = /<img[^>]+>/gi; 
var imgAndSrcReg = /<img[^>]+src=[\'|\"]?([^(?"|?'|?>)]+)[\'|\"]?[^>]*>/gi; 
  1. <img 匹配图片标签;
  2. \^\>\]+ 匹配不是\>的任意字符,+ 1到多

  3. \^\>\]\* 不是\>的任意字符,\*代表0到多;

相关推荐
汪子熙几秒前
深入探析 header facets:定位与应用
前端·javascript
你听得到111 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆5 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er10 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0613 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444016 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆17 分钟前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
前端小巷子20 分钟前
Web开发中的文件下载
前端·javascript·面试
peakmain927 分钟前
Gradle 8.11.1的升级之旅
前端
一拳不是超人37 分钟前
PWA渐进式Web应用技术深度解析
前端·pwa