2013-10-21 4 views
2

나는 내 클라이언트 용으로 만든 간단한 CMS를 가지고 있습니다.앵커 태그에 텍스트 URL을 자동으로 줄 바꿈하는 방법

이 문제는 앵커 태그를 통해 아마 링크를 게시하는 대신 텍스트 편집기로 복사하여 붙여 넣기 만하면됩니다.

자바 스크립트를 사용하여 이러한 링크를 앵커 태그에 넣을 수 있습니까? 그래서 대신에 그것의 페이지가로드 링크이 볼 때 :

http://google.com 

을 그것은이

<a href="http://google.com" target="_blank">http://google.com</a> 

UPDATE

유래 모양을 실제로이 작업을 수행 할 때에 사용자 게시물의 URL 대답/질문 (그것이 내가 성취하려는 것을 이해하는 데 도움이된다면).

감사합니다.

+0

간단한 문자열 연결입니다. 보시려면 여기에 게시 할 수있는 모든 것을 시도해 보셨습니까? –

+0

어디서부터 시작해야할지 모르겠습니다. 여기에 하나의 게시물을 읽었지만 스크립트 태그와 내장 태그 내 URL에 영향을 미치는 것으로 보입니다. –

+1

http://stackoverflow.com/questions/6168260/how-to-parse-a-url http://stackoverflow.com/questions/579335/javascript-regexp-to-wrap-urls-and-emails-in -anchors http://stackoverflow.com/questions/247479/jquery-text-to-link-script –

답변

1

이 줄을 따라 뭔가를 시도해 볼 수 있습니다. 이러한 교체는 'linkify'와 같은 부울 속성을 적용 할 태그를 장식 :

<div linkify>something http://google.com something</div><div linkify>something</div> 

지금 linkify 세트 어떤 요소 내에 교체를 수행합니다.

$('*[linkify]').each(function() 
        { 
         $(this).html($(this).html().replace(/(?:(https?\:\/\/[^\s]+))/m, 
                  '<a href="$1">$1</a>')); 
        }); 

몇 가지주의 사항이 있습니다. 이것은 대단한 정규 표현식이 아닙니다. 첫 번째 공백 문자까지 http:// 또는 https://으로 시작하는 항목과 단순히 일치합니다. regex와 일치하는 더 나은 URL을 찾으십시오. 또한 .html()에 대한 대체를 사용하면 linkify 요소 아래에있는 기존 링크가 손상된다는 것을 의미합니다! 텍스트 링크에 ​​큰 따옴표 문자가 있으면 끊어진 앵커 요소가 생성됩니다.

링크를 식별하는 데 매우 간단한 마크 업을 고려해 볼 수 있습니다. 추측하는 것보다 훨씬 낫습니다.

관련 문제