如何使用JavaScript替换图片srcset属性值以满足A/B测试需求

云原生阿岚

2026-9-27

图片URL替换实现方案

原生JavaScript方案（无依赖，可直接在控制台运行）

以下代码会覆盖所有响应式图片相关属性，包括src/srcset/data-src/data-srcset，全局替换所有img.png为目标新地址，同时保留srcset中的宽度描述参数：

const oldImgKeyword = 'img.png';
const newImgUrl = 'https://newimage.svg';
const targetEls = document.querySelectorAll('.pic_test source, .pic_test img');

targetEls.forEach(el => {
  const replaceAttrs = ['src', 'srcset', 'data-src', 'data-srcset'];
  replaceAttrs.forEach(attr => {
    if (el.hasAttribute(attr)) {
      const originVal = el.getAttribute(attr);
      // 兼容低版本浏览器可替换为 originVal.replace(new RegExp(oldImgKeyword, 'g'), newImgUrl)
      const updatedVal = originVal.replaceAll(oldImgKeyword, newImgUrl);
      el.setAttribute(attr, updatedVal);
    }
  });
});

jQuery方案（需项目已引入jQuery）

const oldImgKeyword = 'img.png';
const newImgUrl = 'https://newimage.svg';

$('.pic_test source, .pic_test img').each(function() {
  const replaceAttrs = ['src', 'srcset', 'data-src', 'data-srcset'];
  const $current = $(this);
  replaceAttrs.forEach(attr => {
    if ($current.attr(attr)) {
      const updatedVal = $current.attr(attr).replaceAll(oldImgKeyword, newImgUrl);
      $current.attr(attr, updatedVal);
    }
  });
});