如何用纯JavaScript实现鼠标悬停时获取、编辑并实时返回img src值？

嘿，看你的描述，你已经搞定了鼠标悬停时捕获图片src的部分，卡在了「把编辑后的结果实时返回展示/利用」这一步对吧？刚好我之前做过类似的缩略图缩放浏览器扩展，给你一步步解决这个问题～

针对你的场景的完整实现 #

先把你的示例代码补全并优化，实现悬停捕获src→编辑路径→实时展示的完整流程：

<img src="pic/th_rose.jpg" alt="玫瑰缩略图">
<img src="pic/th_tulip.jpg" alt="郁金香缩略图">
<h1 id="demo">_ _ _ _ _</h1>

<script>
// 获取页面所有图片和用于展示结果的元素
const imgs = document.getElementsByTagName('img');
const demoDisplay = document.getElementById('demo');

// 给每张图片绑定悬停事件
for (const img of imgs) {
  img.addEventListener('mouseover', function() {
    // 1. 捕获原始src：这里用getAttribute获取页面上的原始相对路径，也可以用this.src拿绝对路径
    const rawSrc = this.getAttribute('src');
    
    // 2. 编辑src：按照你的需求去掉缩略图的th_前缀
    const editedSrc = rawSrc.replace('th_', '');
    
    // 3. 实时返回/展示：把编辑后的路径显示到demo元素里
    demoDisplay.textContent = `原图路径：${editedSrc}`;
    
    // 如果是浏览器扩展，你还可以把这个editedSrc存起来用于后续缩放
    // 比如用chrome.storage.local存储，或者直接传给扩展的弹窗/侧边栏
    // chrome.storage.local.set({ currentOriginalImg: editedSrc });
  });

  // 鼠标离开时重置展示内容
  img.addEventListener('mouseout', () => {
    demoDisplay.textContent = '_ _ _ _ _';
  });
}
</script>

关键细节说明 #

• 捕获src的两种方式：
  • this.getAttribute('src')：获取页面上写的原始相对路径（比如pic/th_rose.jpg）
  • this.src：获取浏览器解析后的绝对路径（比如https://your-site.com/pic/th_rose.jpg），根据你的扩展需求选就行
• 编辑src的逻辑：这里用replace('th_', '')去掉前缀，你可以根据实际的缩略图命名规则修改（比如如果是thumb-rose.jpg就改成replace('thumb-', '')）
• 实时返回的方式：如果是要展示在页面上，就更新DOM元素的内容；如果是扩展内部要用，就用扩展的存储API或者消息传递机制把值传出去

浏览器扩展专属提示 #

如果是做Chrome/Firefox扩展，还要注意：

• 在manifest.json里要声明content_scripts，确保你的脚本能注入到目标页面
• 如果需要把编辑后的src传给扩展的弹窗或后台，可以用chrome.runtime.sendMessage()（Chrome）或browser.runtime.sendMessage()（Firefox）来通信

这样调整后，你就能在鼠标悬停图片时，实时捕获、编辑并返回src值啦～

内容的提问来源于stack exchange，提问作者Jeeva Raam