Javascript Bookmarklet：试图找出如何识别和更改URL'；网页上的图片

我对javascript有一个非常基本的了解，并且已经成功地创建了一个bookmarklet，用于上一个子目录并替换目录名

代码：

基本上，它所做的是分解Blogspot、Picasaweb或Google+albums上图像的URL，并将其替换为最大大小（最多2450x2450）

因此，图像URL：

转换为：

现在，由于我使用的是document.location，所以只有在使用bookmarklet之前使用“在新选项卡中打开图像”选项时，这才有效

我想直接在网页/博客上查看图片，而不必单独打开每张图片

我正在寻找帮助，以弄清楚如何专门识别标签，并通过bookmarklet在页面内联运行上述函数，而不必首先单独打开每个图像

此外，我不确定人们如何只对我感兴趣的图像进行更改，而不是对页面上的所有图像进行更改，因为如果我盲目地这样做，徽标和背景之类的东西就会损坏。我当然不介意，但我在这里的第二个目标是学习如何识别哪个是哪个，并使之无缝

---

也许一旦我运行bookmarklet，我就可以捕获onclick并以某种方式仅在鼠标光标下的元素上应用该函数。

存在

文档。getElementByTagName（'img'）

返回所有

，现在可以使用您在问题中编写的例程进行修改（显然，您必须检查
URL
是否符合您的兴趣，可能需要在域部分使用正则表达式）。
您可以使用CSS属性选择器仅选择要更改的图像，然后可以循环浏览这些图像，并将您的功能仅应用于相关图像

var images = document.querySelectorAll('img[src*="http://common.part.of.image.src"]')

Array.prototype.forEach.call(images, function (img) {
    img.src = yourFunctionThatChangesUrls(img.src)
})

document.querySelectorAll
在现代浏览器中可用，允许您选择页面上与给定选择器匹配的所有元素

假设您试图更改的图像与url的某些部分相同，您可以使用
*=
属性选择器。这意味着
[src*=“foo”]
将匹配任何包含foo的src，这可能会很有用

一旦你有了你的图像，你就可以在每个匹配的元素上使用你的函数了

http://www.website.com/SubD1/SubD2/SubD3/SubD4/s640/blah.JPG

http://www.website.com/SubD1/SubD2/SubD3/SubD4/s2450-k/

var images = document.querySelectorAll('img[src*="http://common.part.of.image.src"]')

Array.prototype.forEach.call(images, function (img) {
    img.src = yourFunctionThatChangesUrls(img.src)
})