jQuery移除图片链接中_optimized_及后续内容的代码优化与网站生效问题

嗨，我来帮你梳理这个问题的完整解决方案，同时优化你的代码结构～

一、正则表达式优化：匹配所有_optimized_后缀 #

你之前的正则/_optimized_[\d]{4}/只能精准匹配_optimized_加4位数字的场景，但实际需求是移除_optimized_及后面所有内容，不管后续是4位数字、更长的字符还是文件后缀（比如.webp）。

只需要把正则改成：

/_optimized_.*/

这个正则的含义是：匹配_optimized_开头，后续跟随任意字符（直到字符串末尾）的片段，完美覆盖你遇到的所有场景。

二、代码精简：合并为更紧凑的写法 #

你原来的三段each循环可以合并成一个，利用jQuery的attr方法的函数式特性（直接接收当前属性值并返回处理后的值），同时用标签-属性映射来简化逻辑，代码更简洁易维护：

优化后的完整代码 #

$(document).ready(function() {
  // 建立标签与对应需要修改的属性的映射
  const elementAttrMap = {
    picture: 'data-fallbackurl',
    source: 'srcset',
    img: 'src'
  };

  // 批量处理所有目标元素
  $('picture, source, img').each(function() {
    const tagName = this.tagName.toLowerCase();
    const targetAttr = elementAttrMap[tagName];
    $(this).attr(targetAttr, (index, currentValue) => {
      // 仅当属性存在时执行替换
      return currentValue ? currentValue.replace(/_optimized_.*/, '') : currentValue;
    });
  });
});

如果追求极致的“一行式”（可读性稍差，但功能一致），可以压缩为：

$(document).ready(()=>{$('picture,source,img').each(function(){const t=this.tagName.toLowerCase(),e={picture:"data-fallbackurl",source:"srcset",img:"src"};$(this).attr(e[t],(i,n)=>n?n.replace(/_optimized_.*/,""):n)})});

三、解决网站不生效的问题 #

你的代码在JSFiddle有效但网站无效，大概率是以下原因：

• 代码执行时机不对：确保代码包裹在$(document).ready()中，或者放在页面底部（</body>标签之前），这样DOM元素已经完全渲染，jQuery才能找到并修改它们。
• jQuery未正确加载：检查网站是否引入了jQuery，且版本与JSFiddle中使用的兼容（避免使用过旧或过新的版本导致API差异）。
• 动态加载的元素：如果你的<picture>/<source>/<img>是通过AJAX或其他动态方式加载的，需要在元素加载完成后再执行上述替换代码（比如在AJAX的success回调中触发，或者使用MutationObserver监听DOM变化）。
• JS冲突：打开浏览器控制台（F12）查看是否有报错，排查是否有其他脚本阻止了当前代码执行。

四、验证效果 #

用你提供的网站代码片段测试，处理后会得到：

• <picture>的data-fallbackurl变为5ef66852db29eb0022cd043d/68b449bee3fdfa2d5d3072e2
• <source>的srcset变为对应前缀
• <img>的src变为5ef66852db29eb0022cd043d/68b449bee3fdfa2d5d3072e2.webp（仅移除_optimized_及后续，保留.webp后缀）

完全符合你的需求～

内容来源于stack exchange