如何重新链接/分割图像URL以指向完整图像？ [英] How to relink/delink image URLs to point to the full image?

问题描述

我正在尝试使用Greasemonkey动态更改网页的网址。

I'm trying to change the URL's of a webpage on the fly using Greasemonkey.

目标网页包含以下链接：

The target page has links like:

<a name="217258323" href="http://foobar.net/photo/217258323/?pgid=&amp;gid=4933418&amp;page=0">
  <img style="border:1px solid #fff;padding:5px;background:#fff;"
    height="120" width="160" alt="Gallery pic 1 of 20 pics" border="0"
    src="http://i.foo.net/images/thumb/52/217/217258323.jpg">
</a>

我想改变它们：

<a name="217258323" href="http://i.foo.net/images/full/52/217/217258323.jpg">
  <img style="border:1px solid #fff;padding:5px;background:#fff;"
    height="120" width="160" alt="Gallery pic 1 of 20 pics" border="0"
    src="http://i.foo.net/images/thumb/52/217/217258323.jpg">
</a>

也就是说，我想要替换链接 href 使用图像 src 值 - 但使用 / full / 而不是 / thumb / 。

That is, I want replace the link href with the image src value -- but with /full/ instead of /thumb/.

任何示例脚本或示例来实现我想要做的事情？

Any sample scripts or examples to achieve what I'm trying to do?

推荐答案

这是一个标准的图像重新链接/脱链问题，您可以找到几个任何网站的预制用户脚本。

This is a standard image relink/delink problem, and you can probably find several premade userscripts for just about any site.

但是不要试图用正则表达式来实现这一点，那种方式就是疯狂（以及破碎的脚本）。

But don't try to do this with just regex, that way lies madness (and broken scripts).

以下是使用DOM方法重新链接示例的方法：

Here's how to relink your example using DOM methods:

var thumbImgs = document.querySelectorAll ("a > img[src*='/thumb/']");

for (var J = thumbImgs.length-1;  J >= 0;  --J) {
    var img     = thumbImgs[J];
    var lnkTarg = img.src.replace (/\/thumb\//, "/full/");
    var link    = img.parentNode;
    link.href   = lnkTarg;
}

这篇关于如何重新链接/分割图像URL以指向完整图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！