如何通过正则表达式实现图片src的_hover后缀添加与移除切换

嘿，这个需求很常见，我给你准备了两个实用的原生JavaScript实现方案，都能完美满足点击按钮切换图片src（添加/移除_hover后缀）的需求：

方案一：动态解析当前图片路径（适配任意路径） #

这个方案适合图片路径可能是相对路径、绝对路径（带域名）的场景，会精准定位文件名部分进行修改，不会误操作路径中的其他内容。

首先准备基础HTML结构：

<!-- 目标图片 -->
<img id="targetImage" src="/images/myimage.png" alt="示例图片">
<!-- 切换按钮 -->
<button id="toggleHoverBtn">切换图片状态</button>

然后是JavaScript逻辑：

// 获取DOM元素
const targetImg = document.getElementById('targetImage');
const toggleBtn = document.getElementById('toggleHoverBtn');
const hoverSuffix = '_hover';

// 绑定点击事件
toggleBtn.addEventListener('click', function() {
    const currentSrc = targetImg.src;
    // 拆分路径和文件名（找到最后一个斜杠的位置）
    const lastSlashPos = currentSrc.lastIndexOf('/');
    const filePath = currentSrc.slice(0, lastSlashPos + 1);
    const fileName = currentSrc.slice(lastSlashPos + 1);

    // 拆分文件名主体和扩展名（找到最后一个点的位置）
    const dotPos = fileName.lastIndexOf('.');
    const fileBase = fileName.slice(0, dotPos);
    const fileExt = fileName.slice(dotPos);

    let newFileBase;
    // 判断是否已经有_hover后缀，决定添加还是移除
    if (fileBase.endsWith(hoverSuffix)) {
        newFileBase = fileBase.slice(0, -hoverSuffix.length);
    } else {
        newFileBase = fileBase + hoverSuffix;
    }

    // 拼接新的图片路径并赋值给img的src
    targetImg.src = filePath + newFileBase + fileExt;

    // （可选）优化按钮文本，提升用户体验
    this.textContent = targetImg.src.includes(hoverSuffix) ? '恢复原图' : '切换到hover图';
});

方案二：维护路径变量（适合固定初始路径的场景） #

如果你的初始图片路径是固定的（比如你定义的var string = "/images/myimage.png";），可以直接维护一个变量来跟踪当前路径，逻辑会更简洁：

<img id="targetImage" alt="示例图片">
<button id="toggleHoverBtn">切换图片状态</button>

// 初始图片路径
let currentImgSrc = "/images/myimage.png";
const targetImg = document.getElementById('targetImage');
const toggleBtn = document.getElementById('toggleHoverBtn');
const hoverSuffix = '_hover';

// 初始化图片src
targetImg.src = currentImgSrc;

toggleBtn.addEventListener('click', function() {
    const dotPos = currentImgSrc.lastIndexOf('.');
    const fileBase = currentImgSrc.slice(0, dotPos);
    const fileExt = currentImgSrc.slice(dotPos);

    // 更新路径变量
    if (fileBase.endsWith(hoverSuffix)) {
        currentImgSrc = fileBase.slice(0, -hoverSuffix.length) + fileExt;
    } else {
        currentImgSrc = fileBase + hoverSuffix + fileExt;
    }

    // 赋值给图片
    targetImg.src = currentImgSrc;
    // （可选）更新按钮文本
    this.textContent = currentImgSrc.includes(hoverSuffix) ? '恢复原图' : '切换到hover图';
});

额外注意事项 #

• 如果需要兼容IE等旧浏览器，endsWith方法可以替换成手动判断：

  // 替换 fileBase.endsWith(hoverSuffix)
  const suffixLength = hoverSuffix.length;
  const hasHoverSuffix = fileBase.slice(-suffixLength) === hoverSuffix;
  

• 确保你的_hover后缀的图片文件确实存在于对应的路径下，否则会出现图片加载失败的情况。

内容的提问来源于stack exchange，提问作者N.J.honey