2

画像のディレクトリをに置き換えたいのですが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)
4

2 に答える 2

0

コードの理解と変更を確認したい場合は、コードをステップに分割して、コードが何をしているのかを理解するのが最も簡単です。

たとえば、このコード行には、問題を複雑にするだけのifステートメントとループの両方があります。

最初から始めて、最初のURL文字列を取得する方法を知っていると仮定しましょう。

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

これで、部分文字列メソッドを使用して、最後から2番目のスラッシュに戻すことができます。javascriptでは、使用する2つの方法は次のとおりです。

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

コメントでは複数行が許可されないため、ここで2番目の質問に回答します。

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

のリファレンスindexOf()。

于 2013-02-01T01:45:42.693 に答える
0

まず、いくつかの問題/質問：

  1. との両方を変更するかどうかは明確ではありません。あなたは？もしそうなら、この種の画像があるページにリンクしてください。_b192
  2. DOMNodeInsertedは非推奨であり、使用することはお勧めできません。
  3. それはどこdocument.getElementById ("chrome")から来たのですか？これは疑わしいようです。これがPinterestページの場合、chromeチェックしたページにIDを持つノードはありません。 変更しようとしているターゲットページにリンクします。
  4. max-widthPinterestの場合、新しい画像サイズを有効にするには、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/") );
    }
}


追加のスタイリングとレイアウトmodが必要ですが、それはこの質問の範囲を超えていることに注意してください。

于 2013-02-01T09:25:25.717 に答える