如何通过JavaScript批量替换背景图片URL中的_closed为_opened

没问题，这事儿不难，我给你写个实用的方案，直接就能用：

核心思路 #

我们需要遍历目标元素，提取它的背景样式字符串，用正则批量替换URL里的_closed.jpg为_opened.jpg，再把新样式赋值回去。

完整代码示例 #

如果要处理所有section元素：

// 遍历每个section元素
$('section').each(function() {
  const $currentEl = $(this);
  // 获取当前元素的完整背景样式
  const originalBg = $currentEl.css('background');
  
  // 全局替换所有_closed.jpg为_opened.jpg
  // 正则里的/g确保匹配所有出现的地方，\.转义点号避免正则误匹配
  const updatedBg = originalBg.replace(/_closed\.jpg/g, '_opened.jpg');
  
  // 把新的背景样式设置回去
  $currentEl.css('background', updatedBg);
});

优化版：只处理包含_closed.jpg的元素 #

如果不想遍历所有section，只想处理确实有目标图的元素，可以加个判断：

$('section').each(function() {
  const $currentEl = $(this);
  const originalBg = $currentEl.css('background');
  
  // 先检查样式里是否包含目标字符串，再执行替换
  if (originalBg.includes('_closed.jpg')) {
    const updatedBg = originalBg.replace(/_closed\.jpg/g, '_opened.jpg');
    $currentEl.css('background', updatedBg);
  }
});

扩展说明 #

• 如果你的目标元素不是section，只需要把$('section')换成对应的选择器就行，比如.bg-container或者div[data-bg]
• 正则里的/g是全局标志，确保如果一个背景样式里有多个URL（虽然这种情况很少见），所有_closed.jpg都会被替换
• 如果你的背景图是通过CSS类定义的，更优雅的方式是切换类或者修改CSS变量，但你这里是直接获取计算后的样式，上面的方法完全适用

内容的提问来源于stack exchange，提问作者All Channels