web-dev-qa-db-ja.com

スクリプトをリンクするjQueryテキスト？

URLへのすべてのテキスト参照を選択し、それらをそれらの場所を指すアンカータグに自動的に置き換えるスクリプトを知っている人はいますか？

For example:

http://www.google.com 

would automatically turn into

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

注：すべてのコンテンツを調べてアンカータグでラップしたくないので、これが必要です。

javascriptjqueryhtmlanchor
40
Elijah Manor

JQueryは、DOMトラバーサル/操作（アンカータグの作成以外）にはあまり関心がないので、ここではあまり役に立ちません。すべてのURLが<p class = "url">タグ内にある場合は、おそらくそうです。

バニラJavaScriptソリューションはおそらくあなたが望むものであり、運命がそれを持っているように、 この人はあなたにカバーしてもらうべきです 。

14
Pseudo Masochist

注：このスクリプトの更新および修正されたバージョンが 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:[email protected]
  • ftp://www.server.com/path
  • ...上記のすべてを山かっこで囲みます（つまり、<...>）

楽しい ：-）

57
Már Örlygsson

私はこの関数を呼び出します

textToLinks: function(text) {

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

ブラウザーにレンダリングする前に静的ページでこれを行うことをお勧めします。そうしないと、変換計算の負担を貧しい訪問者に押し付けることになります。 :) Ruby（stdinからの読み取り、stdoutへの書き込み））での実行方法は次のとおりです。

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

もちろん、これを希望どおりに堅牢にする方法を検討する必要があります。上記はすべてのURLがhttpで始まる必要があり、引用符で囲まれたURL（つまり、すでに<a href="...">内にある可能性がある）を変換しないようにチェックします。 ftp：//、mailto：をキャッチしません。 <script>ボディのような場所でマテリアルを喜んで変換します。

最も満足のいく解決策は、編集者が手動で変換を行うことです。これにより、すべての置換を目で見て承認できるようになります。 優れたエディター を使用すると、グループ参照（別名、後方参照）で正規表現置換を行うことができるため、大した問題ではありません。

4
Pistos

このJQueryプラグインを見てください： https://code.google.com/p/jquery-linkifier/

2
MauroPorras

このサーバー側を行うことは、オプションではない場合があります。クライアント側のTwitterウィジェット（jsonpを使用してTwitter APIに直接移動する）を考えてください。また、ツイート内のすべてのURLを動的にリンクする必要があります...

1
mynameistechno

別の観点からの解決策が必要な場合... phpとHTML Purifierを介してページを実行できる場合、出力を自動フォーマットし、URLをリンクできます。

0
DGM