0

画像へのリンクではなく、ページ上のコードを実際の画像に置き換えたい。別のstackoverflowの回答に基づいて、すでにそれを行うことができます。

しかし、IMGタグで囲まれたものを無視する方法があるかどうか疑問に思っていました. ありがとう！

$("#photos li").each(function() {
        $(this).html($(this).html().replace(/(http:\/\/\S+(\.png|\.jpg|\.gif))/g, '<a href="$1" class="fancybox" rel="gallery1"><img src="$1" /></a>')); 
    });
4

2 に答える 2

1

リストにはリンクではなく一連の URL が含まれているようです。

$("#photos li").each(function() {
    if(!$(this).find('img').length){
         $(this).html($(this).html().replace(/(http:\/\/\S+(\.png|\.jpg|\.gif))/g, '<a href="$1" class="fancybox" rel="gallery1"><img src="$1" /></a>')); 
    }
});

もちろん、これは HTML の構造によって異なります。

JSFiddle .

于 2012-05-18T19:00:36.163 に答える
1

正規表現を html に適用するだけではいけません。理解しにくく、どのような副作用があるかを予測するのは困難です。むしろ、完全に解析された DOM ツリーを持つという利点を利用して、必要な要素 (テキスト ノード) だけを渡す必要があります。

さらに、次のようなことは書かないようにアドバイスします"<img src="$1" />"。$1 に奇妙なものが含まれていると、奇妙なことが起こります。本当に簡単な回避策として、これが引き起こす可能性のあるすべてのことを考える必要はありませんjQuery('<img />').attr('src', someTextWithNotTooWellCheckedContent):

これがどのように機能するかの例を次に示します。

jQuery('#photos li').find('*').contents().filter(function() {
  return this.nodeType == 3;
}).each(function(i, elem)
        {
            var matches = /(.*)(http:\/\/\S+(?:\.png|\.jpg|\.gif))(.*)/g.exec(elem.wholeText);
            if (matches)
            {
                var parent = elem.parentNode;
                var before = matches[1];
                var replace = jQuery('<a />').attr('href', matches[2]).append(jQuery('<img />').attr('href', matches[2]))[0];
                var after = matches[3];
                parent.insertBefore(document.createTextNode(before), elem);
                parent.insertBefore(replace, elem);
                parent.insertBefore(document.createTextNode(after), elem);
                parent.removeChild(elem);
            }
        });

実際: http://jsfiddle.net/B4GPt/

PS: html の構造と意図に応じて、 に置き換えfind('*')て上記のコードを拡張する必要がある場合とない場合があります。find('*').andSelf()

于 2012-05-18T19:01:17.883 に答える