使用Javascript替换图像src的目录

我想替换映像的目录

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)

---

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

例如，在这个代码行中，if语句和循环只会使问题复杂化

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

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

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

string.indexOf(searchvalue,start)

及

将它们组合为：

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

您会注意到，我用另一个斜杠跳过了正斜杠，因此可以识别它而不是解析它。 这应该设置字符串=“*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;

---

首先，一些问题：

不清楚您是否要同时更改

\u b

和

192

。你…吗？如果是这样，请链接到具有此类图像的页面

，使用它不是一个好主意

那

document.getElementById（“chrome”）

来自哪里？这似乎很可疑，如果这是针对Pinterest页面的，那么在我检查的页面上没有id为chrome的节点链接到您试图修改的目标页面

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

---

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

能否先取消此代码的合并？对此表示抱歉。更改了原来的帖子。希望这样更好。我的Javascript知识不是很好。知道将图像文件名从类似更改为的代码会是什么样子吗？同样的原则也适用。如果你知道网址，这是最简单的。您可以将要加入的节之后的url复制到另一个变量中，并在更改“550”目录后将其追加。我正在尝试更改页面上图像url中出现192和550的所有实例。啊，然后您可以使用string.indexOf（192）执行我尝试执行的操作，两个版本的代码都能完美地工作，就像您编写它们一样。非常感谢！事实上，在第一个版本中再次测试它是可行的，但这很好。该脚本被用来替换谷歌阅读器中Pinterest提要中的图像。以前，拇指和较大图像之间的区别只是文件名末尾的“_b”，但最近他们将其更改为不同目录中的相同文件名。使用您编写的代码，旧格式和新格式现在都显示为较大的图像。好的。因为我不知道你在哪个网站上运行脚本，所以我猜测它是Pinterest。因此，对于代码的第二个版本，我删除了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/") );
    }
}