在鼠標懸停時替換部分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來獲取。