正则获取图片标签，正则获取图片路径，图片正则，img正则

单箭头→

已于 2023-08-02 20:01:16 修改

阅读量286

点赞数

文章标签：前端 javascript 正则表达式

于 2023-08-02 17:58:25 首次发布

本文链接：https://blog.csdn.net/weixin_42498482/article/details/132068089

版权

通过正则获取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];