场景:
获取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=[\'|\"]?([^(?"|?'|?>)]+)[\'|\"