基于jQuery修改论坛签名图片路径以切换高分辨率图

背景与需求 #

• 仅掌握基础jQuery，编程能力有限
• 论坛支持自定义加载jQuery代码，但页面内容为动态加载（无法控制）
• 需要实现：页面加载及动态内容更新时，自动将帖子内的用户签名低分辨率图片替换为高分辨率版本，不处理其他图片
• 单个用户的替换逻辑已实现，但不会批量循环处理所有用户

路径对应规则 #

低分辨率路径格式：

https://api.domain.com/signatures/[用户名]@[子域名]/SizedImage/150/150/[图片文件名].jpeg

高分辨率路径格式：

https://[子域名]-[用户名].domain.com/[图片文件名].jpeg

示例：

用户1低分辨率：https://api.domain.com/signatures/user1@subdomain1/SizedImage/150/150/IMG_ABC.jpeg
用户1高分辨率：https://subdomain1-user1.domain.com/IMG_ABC.jpeg
用户2低分辨率：https://api.domain.com/signatures/user2@subdomain2/SizedImage/150/150/IMG_DEF.jpeg
用户2高分辨率：https://subdomain2-user2.domain.com/IMG_DEF.jpeg

解决方案代码 #

// 等待页面初始DOM加载完成
$(document).ready(function() {
  // 定义统一处理签名图片的函数
  function replaceSignatureImages() {
    // 筛选所有签名图片：src包含指定特征字符串的img元素
    $('img[src*="api.domain.com/signatures/"][src*="SizedImage/150/150/"]').each(function() {
      const $currentImg = $(this);
      const lowResUrl = $currentImg.attr('src');
      
      // 用正则提取用户名、子域名、图片文件名
      const urlMatch = lowResUrl.match(/signatures\/([^@]+)@([^\/]+)\/SizedImage\/150\/150\/(.+)$/);
      
      if (urlMatch) {
        // 解构正则匹配到的分组内容
        const [_, username, subdomain, fileName] = urlMatch;
        
        // 拼接高分辨率路径
        const highResUrl = `https://${subdomain}-${username}.domain.com/${fileName}`;
        
        // 替换图片的src属性
        $currentImg.attr('src', highResUrl);
        
        // 如果图片被a标签包裹，同步替换a标签的href
        const $parentLink = $currentImg.closest('a');
        if ($parentLink.length) {
          $parentLink.attr('href', highResUrl);
        }
      }
    });
  }

  // 页面初始加载时执行一次替换
  replaceSignatureImages();

  // 监听DOM变化，处理动态加载的新内容
  const domObserver = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      // 当有新节点添加到DOM时，重新执行替换
      if (mutation.addedNodes.length > 0) {
        replaceSignatureImages();
      }
    });
  });

  // 监听body下所有层级的DOM变化
  domObserver.observe(document.body, { childList: true, subtree: true });
});

代码说明 #

• 筛选签名图片：通过属性选择器[src*="xxx"]精准定位签名图，避免误改其他图片
• 批量处理：用.each()循环遍历所有符合条件的图片，自动处理每个用户的签名
• 正则提取信息：通过正则表达式从低分辨率路径中自动拆分出用户名、子域名和文件名，适配任意用户
• 动态内容兼容：使用MutationObserver监听DOM变化，论坛新加载的帖子内容会自动触发替换逻辑

内容的提问来源于stack exchange，提问作者John E