2

我想替换图像的目录src，更改.*pinterest.com/192/为.*pinterest.com/550/.

我一直在尝试修改此代码以更改目录名称，而不仅仅是删除文件名的“_b”部分。

document.getElementById("chrome")
.addEventListener("DOMNodeInserted", function (a) {
if (a.target.tagName && a.target.tagName == "DIV" && /entry\s?/.test(a.target.className)) {
    var b = a.target.getElementsByTagName("img");
    for (var c in b) {
        var d = b[c];
        if (/.*pinterest\.com.*_b\.\w+$/.test(d.src)) {
            d.style.width = d.style.height = "inherit";
            d.src = d.src.replace(/_b\.(\w+)$/, ".$1")
        }
    }
}
}, false)
4

2 回答 2

0

首先，一些问题/问题：

  1. 不清楚是否要同时更改_b和192。你？如果是这样，请链接到具有此类图像的页面。
  2. DOMNodeInserted已弃用，使用它不是一个好主意。
  3. 那是document.getElementById ("chrome")从哪里来的？这似乎很可疑，如果这是针对 Pinterest 页面的，那么chrome在我检查的页面上没有具有 id 的节点。 链接到您尝试修改的目标页面。
  4. 对于 Pinterest，您还需要重置max-widthCSS 以使新图像大小生效。


您的代码重构以替换路径中的 192 是：

document.getElementById ("chrome").addEventListener (
    "DOMNodeInserted",
    function (zEvent) {
        var newNode = zEvent.target;
        if (
               newNode.tagName  &&  newNode.tagName == "DIV"
            && /entry\b/i.test (newNode.className)
        ) {
            var images = newNode.getElementsByTagName ("img");
            for (var J in images) {
                var image = images[J];
                if (    /pinterest\.com.*_b\.\w+$/.test (image.src)
                    ||  /pinterest\.com\/192\//.test (image.src)
                ) {
                    image.style.width   = "inherit";
                    image.style.height  = "inherit";
                    image.src           = image.src.replace (/_b\.(\w+)$/, ".$1");
                    image.src           = image.src.replace (/\.com\/192\//, ".com/550/");
                }
            }
        }
    },
    false
);

但是，考虑到问题 2、3 和 4；在 Pinterest 上实际运行的完整脚本是：

// ==UserScript==
// @name     _Pinterest, resize thumbnails
// @include  http://pinterest.com/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

waitForKeyElements ("#ColumnContainer a.PinImage img.PinImageImg", resizeThumbnails);

function resizeThumbnails (jNode) {
    var imgSrc  = jNode.attr ("src");

    if (/pinterest\.com\/192\//.test (imgSrc) ) {
        jNode.css ( {
            width:          "inherit",
            height:         "inherit",
            "max-width":    "550px"
        } );
        jNode.attr ("src", imgSrc.replace (/\.com\/192\//, ".com/550/") );
    }
}


请注意，需要额外的样式和布局模块，但这超出了这个问题的范围。

于 2013-02-01T09:25:25.717 回答
0

如果您想了解和修改代码，最简单的方法是将其分解为多个步骤，以便您了解它在做什么。

例如，在此代码行中，您有 if 语句和循环，只会使问题复杂化。

从头开始，假设您知道如何获取初始 URL 字符串。

var string = '.*pinterest.com/192/';

现在我们可以使用 substring 方法将其返回到倒数第二个正斜杠。使用 javascript，我们将使用的两种方法是

string.indexOf(searchvalue,start)

和

string.substring(from, to)

将它们组合起来：

string = string.substring(0, string.substring('//');

你会注意到我已经用另一个转义了正斜杠，所以它可以被识别而不是被解析。这应该设置 string = ".*pinterest.com/";

所以现在你可以在最后添加你自己的目录。

string += '550/';

回覆：


http://media-cache-ec4.pinterest.com/192/24/4c/a5/244ca513d930a9f21fd89e8455948a49.jpg
知道将图像文件名从以下内容更改为的代码是什么样的：
http://media-cache-ec4.pinterest.com/550/24/4c/a5/244ca513d930a9f21fd89e8455948a49.jpg？

我会在这里回答你的第二个问题，因为评论不允许我多行。

var s1 = string.substring(0, string.substring('//'));
var s2 = string.substring(string.substring('//')+1);
string = s1+'550/'+s2;

参考资料indexOf()。

于 2013-02-01T01:45:42.693 回答