스크립트를 연결하는 jQuery 텍스트? [복제하다

StackOverflow https://stackoverflow.com/questions/247479

문제

이 질문은 이미 여기에 답이 있습니다.

누구든지 URL에 대한 모든 텍스트 참조를 선택하고 해당 위치를 가리키는 앵커 태그로 자동 교체 할 수있는 스크립트를 알고 있습니까?

For example:

http://www.google.com 

would automatically turn into

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

참고 : 나는 모든 콘텐츠를 거치고 앵커 태그로 랩핑하고 싶지 않기 때문에 이것을 원합니다.

도움이 되었습니까?

해결책

JQuery는 DOM Traversal/Danipulation (앵커 태그 생성 외에)에 관심이 없기 때문에 여기에서 많은 도움이되지 않을 것입니다. 모든 URL이있는 경우u003Cp class="url"> 아마도 태그 아마도.

바닐라 JavaScript 솔루션은 아마도 당신이 원하는 것일 것입니다. 이 사람은 당신을 덮어야합니다.

다른 팁

노트: 이 스크립트의 업데이트 및 수정 버전은 이제 사용할 수 있습니다. https://github.com/maranomynet/linkify (GPL/MIT 라이센스)

흠 ... 나에게 이것은 jQuery의 완벽한 과제 인 것 같습니다.

... 이와 같은 것이 내 마음의 꼭대기에서 나왔습니다.

// Define: Linkify plugin
(function($){

  var url1 = /(^|&lt;|\s)(www\..+?\..+?)(\s|&gt;|$)/g,
      url2 = /(^|&lt;|\s)(((https?|ftp):\/\/|mailto:).+?)(\s|&gt;|$)/g,

      linkifyThis = function () {
        var childNodes = this.childNodes,
            i = childNodes.length;
        while(i--)
        {
          var n = childNodes[i];
          if (n.nodeType == 3) {
            var html = $.trim(n.nodeValue);
            if (html)
            {
              html = html.replace(/&/g, '&amp;')
                         .replace(/</g, '&lt;')
                         .replace(/>/g, '&gt;')
                         .replace(url1, '$1<a href="http://$2">$2</a>$3')
                         .replace(url2, '$1<a href="$2">$2</a>$5');
              $(n).after(html).remove();
            }
          }
          else if (n.nodeType == 1  &&  !/^(a|button|textarea)$/i.test(n.tagName)) {
            linkifyThis.call(n);
          }
        }
      };

  $.fn.linkify = function () {
    return this.each(linkifyThis);
  };

})(jQuery);

// Usage example:
jQuery('div.textbody').linkify();

다음과 같은 모든 발생을 링크로 바꾸려고합니다.

  • www.example.com/path
  • http://www.example.com/path
  • mailto:me@example.com
  • ftp://www.server.com/path
  • ... 위의 모든 앵글 괄호 (즉 <...>)

즐기다 :-)

이 기능이 호출됩니다 

textToLinks: function(text) {

    var re = /(https?:\/\/(([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?))/g;
    return text.replace(re, "<a href=\"$1\" title=\"\">$1</a>");
  }

브라우저로 렌더링하기 전에 정적 페이지 에서이 작업을 수행하거나 전환 계산의 부담을 가난한 방문자에게 추진할 것을 제안합니다. :) 여기 루비에서 어떻게 할 수 있는가 (Stdin에서 읽기, Stdout에 글을 쓸 수 있음) :

while line = gets
  puts line.gsub( /(^|[^"'])(http\S+)/, "\\1<a href='\\2'>\\2</a>" )
end

분명히, 당신은 원하는만큼 강력하게 만드는 방법에 대해 생각하고 싶을 것입니다. 위의 내용은 모든 URL이 HTTP로 시작해야하며, 인용문에있는 URL을 변환하지 않는지 확인하지 않습니다 (즉, 이미 AN 내부에있을 수 있음 u003Ca href="...">). ftp : //, mailto :. 그것은 같은 장소에서 재료를 행복하게 변환 할 것입니다u003C/a>u003Cscript> bodies, which you may not want to happen.

가장 만족스러운 솔루션은 실제로 편집자와 손으로 변환하여 모든 대체를 승인 할 수 있도록하는 것입니다. 좋은 편집자 그룹 참조 (일명 후면 참조)와 Regexp 대체를 할 수 있으므로 큰 문제가되지 않아야합니다.

이 jQuery 플러그인을 살펴보십시오. https://code.google.com/p/jquery-linkifier/

이 서버 측을하는 것은 때때로 옵션이 아닙니다. 클라이언트 측 트위터 위젯 (JSONP를 사용하여 Twitter API로 직접 이동)을 생각하면 트윗의 모든 URL을 동적으로 연결하려고합니다 ...

다른 관점에서 솔루션을 원한다면 ... PHP 및 HTML 청정기를 통해 페이지를 실행할 수 있다면 출력을 자동으로 만들고 URL을 연결할 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top