使用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

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

例如，在这个代码行中，你有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/';

---

---

RE

  

任何想法代码更改图像文件名的方式如下：
  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;

Reference for indexOf().

Answer 2

首先，一些问题/问题：

1. 目前尚不清楚是否要更改 {/ 1}}和_b。你呢？如果是这样，请链接到具有此类图像的页面。
2. DOMNodeInserted is deprecated，使用它不是一个好主意。
3. 192来自哪里？这看起来很可疑，如果这是针对Pinterest页面的，我检查的页面上没有id为document.getElementById ("chrome")的节点。 链接到您尝试修改的目标网页。
4. 对于Pinterest，您还需要重置chrome CSS以使新图片尺寸生效。


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

max-width

---

---

但是，考虑到问题2,3和4;实际适用于Pinterest的 完整脚本 是：

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


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