jQuery : 모든 이미지 링크를 찾아 기본 엄지 손가락으로 변환 하시겠습니까?

Question

나는 WYSIWYG를 사용하고 있으며 사용자가 이미지를 업로드하는 것을 허용하지 않고 단지 사이트 외부의 이미지에 대한 링크 만 허용합니다.

그래서 모든 이미지 링크/경로를 찾고 사용자가 클릭 할 수있는 기본 엄지 손가락으로 바꾸려면 이미지를 모달 창에 표시하고 싶습니다. 나는 qTip를 사용하고 있지만,이 경우 그 작업 : 그래서

의 나의 일부가 될 것입니다 :

http://sstatic.net/so/img/logo.png 

또는

http://l.yimg.com/a/i/ww/news/2010/02/22/fries_on_plate-pd.jpg 

그들은 같은 것으로 "변환"입니다

:

<a href="http://OriginalPathToImage" rel="tool_tip"><img src="/SomeDefaultImageThumb.jpg" /></a> 

그럼 모든 이미지를 찾는 방법 은요? .jpg, .gif, .png .... 또는 다른 해결책을 찾는 데 필요한 RegExp는 무엇입니까?

Answer 1

내가 무엇을 검색하는지 모르기 때문에 정확히 무엇을 해야할지 말하기가 다소 힘듭니다.

링크가 현재 태그의 일부인 경우 간단합니다.

그러나 이미지 href가 현재 어떤 태그에도 포함되어 있지 않은 것처럼 들립니다. 그게 맞습니까?

그렇다면, 당신은 당신이, 당신은

var result = text.match(/http:\/\/\S+(\.png|\.jpg|\.gif)/g); 

을 (이것은 내가 확실히 비트를 조여있어 수있는 간단한 일이다. 그것은이기 때문에, 그것을 시도 할 수있는 레지 애 썼는데 필요가 있다고 생각

'http : //'와 '.png'또는 '.jpg'또는 '.gif'를 제외한 공백 문자 이외의 문자를 검색합니다. 예를 들어, href에 '공백'문자가 허용되지 않습니다. 결과 배열을 반환합니다.

그래서 경우에 검색 텍스트이었다 :

var text = 'http://sstatic.net/so/img/logo.png some text http://l.yimg.com/a/i/ww/news/2010/02/22/fries_on_plate-pd.jpg more text http://l.yimg.com/this/is/another/path/to_this_image.jpg'; 

그것은 3 개 결과의 배열을 반환합니다. jQuery를 사용

(당신이 그것을 태그 때문에) 당신이 다음 수 : 몸에,이 경우, 새로운 태그를 추가합니다

var $aTag; 

for(i in result) { 
    $aTag = $('<a><img src="/SomeDefaultImageThumb.jpg" /></a>').attr({'href': result[i]}); 
    $('body').append($aTag); 
} 

.

편집 : 귀하의 예제를 사용하여, 나는 검색 쿼리의 주위에 괄호를 추가하고, 대체 문자열에서 "$ 1"= href가 그것을 참조 -

괄호의 추가 세트가 검색 문자열에 추가되었습니다. $ 1에 의해 참조 된 '암기 된'그룹이 만들어집니다. 악성 코드가 연결 문자열에 숨겨진 할 수있는 경우

$("div.test").each(function() { 
    $(this).html($(this).html().replace(/(http:\/\/\S+(\.png|\.jpg|\.gif))/g, '<a href="$1"><img src="/SomeDefaultImageThumb.jpg" /></a>')); 
}); 

이 보안에 미치는 영향을있을 수 있습니다. 확실하지. 그것이 문제라면, 그것에 대해 갈 다른 방법이 있어야합니다.

편집 : 사이트의 도메인 에서 제외하는 HREF (그들이 검색되는 동일한 텍스트의 일부 가정).

var hostname = window.location.hostname.replace(/\./g,'\\.'); 
var re = new RegExp('(http:\\/\\/[^' + hostname + ']\\S+[\\.png|\\.jpg|\\.gif])','g'); 

$("div.test").each(function() { 
    $(this).html($(this).html().replace(re, '<a href="$1"><img src="/SomeDefaultImageThumb.jpg" /></a>')); 
}); 

Answer 2

나는 집에서 쿠키를 잃어 버렸기 때문에 다시 답장을해야합니다. 한 번 더

Answer 3

정규식

<a href=".jpg"> 
<a href=".png"> 

감사 :

난 그냥 확장, 전체 링크를받지 못했습니다? 우리는 악취가 필요 없어. RegEx!

$('a[href$="jpg"], a[href$="jpeg"], a[href$="png"], a[href$="gif"]') 

CSS 선택자가 사용할 수 있습니다. 위의 예는 href이 지정된 형식으로 끝나는 모든 a 요소를 선택합니다.