首页 前端知识 js获取html中的img标签,图片标签,提取src属性并替换操作

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

2024-06-05 13:06:30 前端知识 前端哥 410 476 我要收藏

场景:
获取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. src=[‘|“]?([^(?”|?’|?>)]+)[‘|"]?匹配src属性,[’|“]? 属性用单引号或者双引号包起来的,可包可不包(可有可无);其中([^(?”|?‘|?>)]+)最里层的(?"|?’|?>)非"非’非>,整个就是src中的属性值为非"或非’或非>的任意字符;
  4. [^>]* 不是>的任意字符,*代表0到多;
转载请注明出处或者链接地址:https://www.qianduange.cn//article/10805.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!