40

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

For example:

http://www.google.com 

would automatically turn into

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

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

4

7 に答える 7

57

注:このスクリプトの更新および修正されたバージョンは、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
  • ...山括弧で囲まれた上記のすべて (つまり<... >)

楽しみ ：-）

于 2008-10-30T00:19:07.210 に答える
14

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

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

于 2008-10-29T16:47:56.577 に答える
5

私は私が呼び出すこの関数を持っています

textToLinks: function(text) {

    var re = /(https?:\/\/(([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?))/g;
    return text.replace(re, "<a href=\"$1\" title=\"\">$1</a>");
  }
于 2012-07-06T09:15:25.147 に答える
4

ブラウザにレンダリングする前に静的ページでこれを行うことをお勧めします。そうしないと、変換計算の負担が貧しい訪問者に押し付けられます。:)これが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>本体のような、起こりたくない場所の素材を喜んで変換します。

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

于 2008-10-29T16:51:42.717 に答える
2

この JQuery プラグインを見てみましょう: https://code.google.com/p/jquery-linkifier/

于 2011-08-11T19:55:06.047 に答える
1

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

于 2010-09-20T20:56:00.620 に答える
0

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

于 2008-10-29T16:57:22.237 に答える