Javascript 이미지 텍스트 링크를 이미지로 바꾸지 만 기존 IMG 태그는 무시

Question

페이지의 코드를 이미지 링크가 아닌 실제 이미지로 바꾸고 싶습니다. 나는 이미 다른 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>')); 
    }); 

Answer 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.

Answer 2

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('*').andSelf()와 find('*')를 대체하여 위의 코드를 확장 할 필요하지 않을 수도 있습니다 구조 및 의도.