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

单箭头→2024-01-30 18:57

场景：

获取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;

<img 匹配图片标签；
$\^\>\]+ 匹配不是\>的任意字符，+ 1到多$
$\^\>\]\* 不是\>的任意字符，\*代表0到多；$