Replace the directory of an image src, using Javascript

问题

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

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)

回答1:

First, some issues/questions:

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.
DOMNodeInserted is deprecated, and it is not a good idea to use it.
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.
For Pinterest, you also need to reset the max-width CSS for your new image size to take effect.

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

But, taking into account issues 2, 3, and 4; a complete script that actually works on Pinterest is:

// ==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.

回答2:

If you want to look at understanding and modifying code it's easiest to break it down into steps so you understands what it's doing.

For instance, in this code-line you have both if statements and loops that only complicate the matter.

Starting from scratch let's presume you know how to get the initial URL string.

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

Now we can use a substring method to take it back to the second last forward-slash. With javascript the two methods we'll be using are

string.indexOf(searchvalue,start)

and

string.substring(from, to)

Combine them as so:

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

You'll notice I've escaped the forward slash with another so it can be identified instead of parsed. This should set string = ".*pinterest.com/";

So now you can add your own directory on the end.

string += '550/';

RE:

Any idea what the code would look like to change image filenames from something like:
http://media-cache-ec4.pinterest.com/192/24/4c/a5/244ca513d930a9f21fd89e8455948a49.jpg
to
http://media-cache-ec4.pinterest.com/550/24/4c/a5/244ca513d930a9f21fd89e8455948a49.jpg?

I'll answer your second question here as the comment won't allow me to multi-line.

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

Reference for indexOf().

来源：https://stackoverflow.com/questions/14638315/replace-the-directory-of-an-image-src-using-javascript

标签

javascript

greasemonkey