jQuery Text to Link Script？ [複製]

https://stackoverflow.com/questions/247479

05-07-2019
|

質問

この質問にはすでに回答があります：

プレーンURLをリンクに置き換える方法 24の答え

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

For example:

http://www.google.com 

would automatically turn into

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

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

解決

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

バニラ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>");
  }

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

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

明らかに、これをあなたが望むほど堅牢にする方法について考えたいと思うでしょう。上記では、すべてのURLがhttpで始まる必要があり、引用符で囲まれたURL（つまり、既に<！> lt; a href = <！> quot; ... <！> quot;内にあるURLを変換しないようにチェックします。 <！> gt;）。 ftp：//、mailto：はキャッチしません。 <！> lt; script <！> gt;のような場所でマテリアルを喜んで変換します。あなたは起こりたくないかもしれません。

最も満足のいく解決策は、エディターで手動で変換を行うことです。そうすれば、すべての代替を目で見て承認することができます。優れたエディターを使用すると、グループ参照（別名後方参照）で正規表現の置換を行うことができます。大したこと。

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

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

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

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow