Comment trouver le lien dans un texte en utilisant jquery?

Question

Disons que j'ai un texte comme celui-ci "Ceci est un texte long qui contient 150 caractères, vous pouvez trouver plus à propos de ce texte sur ce lien http://www.somewebsite.com/RDFCCSDVDS". Donc, dans le texte ci-dessus, je veux trouver ce lien et le convertir en un lien de sorte que lorsque l'utilisateur clique dessus, l'utilisateur sera amené directement sur ce site.

Comment puis-je atteindre cet objectif?

Answer 1

Je pense que je pourrais bien améliorer cela, mais à la minute c'est le meilleur que je peux offrir (même si je pense que certains types de remplacer pourrait fonctionner plus efficacement):

var $words = $('p').text().split(' '); 
for (i in $words) { 
    if ($words[i].indexOf('http://') == 0) { 
     $words[i] = '<a href="' + $words[i] + '">' + $words[i] + '</a>'; 
    } 
} 

$('p').html($words.join(' ')); 

JS Fiddle demo.

Une version légèrement améliorée de ce qui précède (mais bon seigneur, il est laid ...):

var punctuation = ['!',"'",'"',',','.']; 
$('p').each(
    function(){ 
     $words = $(this).text().split(' '); 
     for (i in $words){ 
      if ($.inArray($words[i].charAt(0),punctuation) > -1 && $words[i].indexOf('http://') == 1){ 
       alert($words[i]); 
      } 
      else if ($.inArray($words[i].charAt($words[i].length - 1),punctuation) > -1 && ($words[i].indexOf('http://') == 1 || $words[i].indexOf('http://') == 0)){ 
       $words[i] = '<a href="'+$words[i].substring(0,$words[i].length-1)+'">' + $words[i].substring(0,$words[i].length-1) + '</a>' + $words[i].charAt($words[i].length-1); 
      } 
      else if ($words[i].indexOf('http://') == 0){ 
       $words[i] = '<a href="' + $words[i] + '">' + $words[i] + '</a>'; 
      } 
     } 
     $(this).html($words.join(' ')); 
    }); 

JS Fiddle demo.

Je ne suis pas très sûr de ce qu'il faut faire à propos des liens entre guillemets, par exemple (texte tel que "http://google.com", par exemple); et, honnêtement, je pense que regex est probablement le loin, loin meilleure approche à ce problème.

Answer 2

à jquery, vous pouvez utiliser la balise dans votre sélecteur pour obtenir tous les liens de la page .. à savoir $("a")

Donc, si vous voulez faire quelque chose à chaque lien sur la page, vous pouvez utiliser

$("a").each(function() { 
    //your code here. you can access the link by using $(this) 
}); 

Answer 3

en utilisant l'expression régulière

var e = /http:\/\/([A-Za-z0-9\.-_]{2,}\.)+[A-Za-z]{2,}(\/.+)/, 
    s = "This is a long text. It contains 150 characters. You can find more about this text on this link http://www.somewebsite.com/RDFCCSDVDS"; 

if (s.match(e)) { 
    var url = RegExp['$&']; 
    s = s.replace(url, '<a href="' + url + '">' + url + '</a>'); 
} 

Answer 4

Utiliser des expressions régulières:

$('p').html(function(i, text) { 
    return text.replace(
     /\bhttp:\/\/([\w\.-]+\.)+[a-z]{2,}\/.+\b/gi, 
     '<a href="$&">$&</a>' 
    ); 
}); 

demo

Answer 5

solution @Eric est brillante, mais je découvert qui pourrait se tromper si l'URL comporte des espaces après . Essayez son exemple jsFiddle avec un texte comme celui-ci:

<p>This is a long text. It contains 150 characters. You can find more about this text on this link http://api.som-ewebsite.com/RDFCCS-VDS/#!/?p1=foo&p2=bar right here</p>​​​​​​​​​​​​​​​​​​​​​​​ 

Je changé la dernière partie de la regex pour intercepter à peu près tous les caractères d'URL conviviale excluant l'espace, ce qui est une URL « Terminator » pour moi (en le monde réel ce n'est pas, bien sûr, mais je ne pouvais pas trouver un moyen de séparer les espaces normaux et les espaces appartenant à une URL dans un texte brut).

$('p').html(function(i, text) { 
    return text.replace(
     /\bhttp:\/\/([\w\.-]+\.)+[a-z]{2,}([\/\w\.\-\_\?\=\!\#,\&]+)/gi, 
     '<a href="$&">$&</a>' 
    ); 
});​​ 

Je pense qu'il peut être amélioré, les suggestions sont les bienvenues comme toujours :)

ÉDITÉ:

Quoi qu'il en soit, je pense que c'est la meilleure solution autour de: How to replace plain URLs with links?