在鼠标悬停时替换部分URL，以获取原始大小的图像

Question

对于Violentmonkey或Greasemonkey。

我想在鼠标悬停时替换URL的一部分，以便可以将图像的原始大小（而不是提供的大小）复制到内存中。 图片网址格式是恒定的。 所需替换的文本始终位于相同的位置，例如模板。

blogspot.com页面的示例：

https://hopedogrescue.blogspot.com/2019/06/what-you-need-to-know-about-canine.html

上一页中的图片网址示例：

https://1.bp.blogspot.com/-k-J3eJs1nH0/XQg9ZTO9i2I/AAAAAAAAVXI/MJijXqZxrLQt9xmoK-mHlAJPrtFe7SM4ACLcBGAs/s1600/matthieu%2Bserious.jpg

上面的图片网址示例，现在s1600更改为s0：

https://1.bp.blogspot.com/-k-J3eJs1nH0/XQg9ZTO9i2I/AAAAAAAAVXI/MJijXqZxrLQt9xmoK-mHlAJPrtFe7SM4ACLcBGAs/s0/matthieu%2Bserious.jpg

如果我在论坛中或任何页面中，我希望用户在此张贴任何现有图像。 我想要鼠标悬停时图像原始大小的URL，以便可以保存互联网数据。 复制后，我的下载器将从内存中拦截图像的URL。 因此，我可以使用其现有图像反复访问论坛/页面。

到目前为止，鼠标悬停时s1600尚未更改为s0。

// ==UserScript==
// @name        My orig image sizes
// @description Get orig image sizes.
// @namespace   My monkey scripts
// @version     1.0
// @grant       none
// @match       *://*.blogspot.com/*
// @run-at      document-start
// ==/UserScript==

document.addEventListener("mouseover", myFunction);

function myFunction() {
  var url = 'https:\/\/.\.bp.blogspot.com\/.\/.\/.\/.\/s1600\/.\.jpg'
  url = url.replace('s1600','s0')
}

Answer 1

您可以通过DOM引用来处理此问题，这实际上是JavaScript在必须修改或引用DOM时的工作方式。

 const images = document.querySelectorAll("img"); let imagesData = []; images.forEach((i,x)=>{ imagesData.push(i.src); //Saves every DOM reference of an img tag i.addEventListener("mouseover", ()=>{toggleImage(x,true);}); i.addEventListener("mouseout", ()=>{toggleImage(x,false);}); }); function toggleImage(e,h) { images[e].src = h ? "//placehold.it/150/00F/FFF/?text=Hover" : imagesData[e]; } 

 <img id="img1" src="//placehold.it/150/600/FFF/?text=Image 1"> <img id="img2" src="//placehold.it/150/A00/FFF/?text=Image 2"> <img id="img3" src="//placehold.it/150/F00/FFF/?text=Image 3"> <img id="img4" src="//placehold.it/150/C00/FFF/?text=Image 4"> 

注意 ：如果要根据上一个URL替换特定的URL，可以使用toggleImage函数中的images[e].src来获取。