通过正则获取HTML片段中的图片标签并拿到图片URL做处理
场景: 假设有一个需求要对接口吐出来HTML片段进行图片处理,处理完的图片在标签上加个自定义属性,如下:
function dealDetailWithImg(content, width= 600){
if(!content) return '';
// 获取img标签
let reg = /<img.*?src=[\'\"]?([^\'\"]*)[\'\"]?.*?>/gi;
if(!reg.test(content)) return content; // 内容中无图直接返回不用处理
return content.replace(reg, function($0, $1){
// $0: 图片标签, $1 图片源路径
return $0.replace($1, imageToWebp($1, width)).replace(/\/?>/, `data-src="${$1}" data-flag="true"/>`)
})
}
获取img 标签
var imgReg = /<img.*?(?:>|\/>)/gi;
获取图片URL
let str = '<img class="lazy" src="https://xxx.com/test.png" alt="图">'
let imgPathReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
let imgArr = str.match(imgPathReg);
let imgPath = imgArr[1];