使用Javascript替换图像src的目录 [英] Replace the directory of an image src, using Javascript

问题描述

我想替换图片 src 的目录，更改。* pinterest.com/192/到。* pinterest.com/550 / 。

I'd like to replace the directory of an image src, changing .*pinterest.com/192/ to .*pinterest.com/550/.

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

I had been trying to modify this code to change the directory name instead of just removing the "_b" part of the filename.

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)

推荐答案

首先，一些问题/问题：

First, some issues/questions:

1. 目前尚不清楚是否要更改 _b 和 192 。你呢？如果是这样，请链接到具有此类图像的页面。


2. DOMNodeInserted 已被弃用，使用它不是一个好主意。


3. 哪个 document.getElementById（chrome）来自哪里？这似乎是可疑的，如果这是针对Pinterest页面，我检查的页面上没有id chrome 的节点。 链接到您要修改的目标网页。


4. 对于Pinterest，您还需要重置 max-width CSS让您的新图片尺寸生效。

1. It's not clear if you want to change both the _b and the 192. Do you? If so, please link to a page that has this kind of image.
2. DOMNodeInserted is deprecated, and it is not a good idea to use it.
3. Where is that document.getElementById ("chrome") coming from? That seems suspicious and, if this is for Pinterest pages, there is no node with the id chrome on the pages I checked. Link to the target page(s) you are trying to modify.
4. For Pinterest, you also need to reset the max-width CSS for your new image size to take effect.

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

Your code refactored to replace the 192 in just the path is:

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/") );
    }
}

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

Note that additional styling and layout mod is needed, but that is beyond the scope of this question.

这篇关于使用Javascript替换图像src的目录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！