javascript - 使用 Javascript 替换图像 src 的目录

Question

我想替换图片的目录 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)

Answer 1

首先，一些问题/问题:

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

您重构的代码仅替换路径中的 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/") );
    }
}

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