web-dev-qa-db-fra.com

Texte jQuery pour lier le script?

Quelqu'un connaît-il un script qui peut sélectionner toutes les références textuelles aux URL et les remplacer automatiquement par des balises d'ancrage pointant vers ces emplacements?

For example:

http://www.google.com 

would automatically turn into

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

Remarque: je le veux parce que je ne veux pas parcourir tout mon contenu et les encapsuler avec des balises d'ancrage.

javascriptjqueryhtmlanchor
40
Elijah Manor

JQuery ne va pas vous aider beaucoup ici car vous n'êtes pas vraiment concerné par la traversée/manipulation DOM (autre que la création de la balise d'ancrage). Si toutes vos URL étaient dans des balises <p class = "url">, alors peut-être.

Une solution JavaScript Vanilla est probablement ce que vous voulez, et comme le destin l'aurait, ce gars devrait vous couvrir .

14
Pseudo Masochist

REMARQUE: Une version mise à jour et corrigée de ce script est maintenant disponible sur https://github.com/maranomynet/linkify (Licence GPL/MIT)

Hmm ... cela me semble être la tâche parfaite pour jQuery.

... quelque chose comme ça m'est venu à l'esprit:

// 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();

Il tente de transformer toutes les occurrences des éléments suivants en liens:

  • www.example.com/path
  • http://www.example.com/path
  • mailto:[email protected]
  • ftp://www.server.com/path
  • ... tous les éléments ci-dessus sont placés entre crochets (c'est-à-dire <...>)

Prendre plaisir :-)

57
Már Örlygsson

J'ai cette fonction que j'appelle

textToLinks: function(text) {

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

Je vous suggère de le faire sur vos pages statiques avant le rendu sur le navigateur, ou vous ferez peser la charge du calcul de conversion sur vos pauvres visiteurs. :) Voici comment vous pouvez le faire dans Ruby (lecture depuis stdin, écriture vers stdout):

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

Évidemment, vous voudrez réfléchir à la façon de rendre cela aussi robuste que vous le souhaitez. Ce qui précède nécessite que toutes les URL commencent par http, et vérifiera de ne pas convertir les URL qui sont entre guillemets (c'est-à-dire qui peuvent déjà être à l'intérieur d'un <a href="...">). Il n'attrapera pas ftp: //, mailto :. Il convertira avec plaisir du matériel dans des endroits comme des corps <script>, ce que vous ne voudrez peut-être pas.

La solution la plus satisfaisante est vraiment de faire la conversion à la main avec votre éditeur afin que vous puissiez regarder et approuver toutes les substitutions. n bon éditeur vous permettra de faire une substitution regexp avec des références de groupe (aka références antérieures), donc ça ne devrait pas être un gros problème.

4
Pistos

Jetez un œil à ce plugin JQuery: https://code.google.com/p/jquery-linkifier/

2
MauroPorras

Faire cela côté serveur n'est parfois pas une option. Pensez à un widget Twitter côté client (qui va directement à l'API Twitter en utilisant jsonp), et vous voulez lier dynamiquement toutes les URL dans les Tweets ...

1
mynameistechno

Si vous voulez une solution d'un autre point de vue ... si vous pouvez exécuter les pages via php et HTML Purifier, il peut formater automatiquement la sortie et lier toutes les URL.

0
DGM