如何重新链接/取消链接图像 URL 以指向完整图像？答案

【问题标题】：How to relink/delink image URLs to point to the full image?如何重新链接/取消链接图像 URL 以指向完整图像？
【发布时间】：2014-10-25 13:19:00
【问题描述】：

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

目标页面有如下链接：

<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/。

任何示例脚本或示例来实现我正在尝试做的事情？

【问题讨论】：

标签： javascript hyperlink greasemonkey

【解决方案1】：

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

但不要尝试仅使用正则表达式、that way lies madness（和损坏的脚本）来执行此操作。

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

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;
}

【讨论】：

谢谢！这完美无缺。但是，单击时如何使链接在新选项卡中打开？
聪明的方法就是中键点击链接。否则，在代码中的 link.href... 行之后添加 link.target = "_blank";。 "_blank" 强制链接在新标签页中打开（如果您正常设置浏览器首选项）。

【解决方案2】：

我想你想要这样的东西，

> var s = '<a name="217258323" href="http://foobar.net/photo/217258323/?pgid=&amp;gid=4933418&amp;page=0">\n   <img style="border:1px solid #fff;padding:5px;background:#fff;"\n     height="120" width="160" alt="Gallery pic 1 of 20 pics" border="0"\n     src="http://i.foo.net/images/thumb/52/217/217258323.jpg">\n </a>';
undefined
> var f = s.replace(/(href=")[^"]*([\s\S]*?)(src=")([^"]*)([\S\s]+?<\/a>)/g, '$1$4$2$3$4$5');
undefined
> var result = f.replace(/thumb(?=.*thumb)/, 'full');
undefined
> result
'<a name="217258323" href="http://i.foo.net/images/thumb/52/217/217258323.jpg">\n   <img style="border:1px solid #fff;padding:5px;background:#fff;"\n     height="120" width="160" alt="Gallery pic 1 of 20 pics" border="0"\n     src="http://i.foo.net/images/thumb/52/217/217258323.jpg">\n </a>'

【讨论】：