Comment remplacer les Url plaine avec des liens?

Tout d'abord, rouler votre propre regexp pour analyser les Url est un terrible idée. Vous devez imaginer que c'est un problème assez commun que quelqu'un a écrit, de débogage et testé une bibliothèque pour elle, selon les Rfc. Les uri sont complexes - découvrez le code pour analyser les URL dans Node.js et la page de Wikipedia sur Modèles d'URI.

Il y a une tonne de bord des cas quand il s'agit de l'analyse d'Url: internationales des noms de domaine, réel (.museum) vs inexistante (.etc) Tld, bizarre ponctuation y compris entre parenthèses, les signes de ponctuation à la fin de l'URL, IPV6 noms d'hôtes etc.

J'ai regardé une tonne de les bibliothèques, et il y a un peu de peine de l'utiliser malgré quelques inconvénients:

• De caisse à savon de linkify a vu des efforts sérieux de mettre en elle, et l'un des principaux refactoriser en juin 2015 enlevé le jQuery dépendance. Il a encore problèmes avec les Idn.
• AnchorMe est un nouveau venu qui les réclamations pour être plus rapide et plus maigre. Certains IDN questions ainsi.
• Autolinker.js listes de caractéristiques très spécifiques (par exemple, "gèrent correctement les entrées HTML. L'utilitaire va pas changer le href attribut à l'intérieur de l'ancre () balises"). Je vais jeté quelques tests à quand un démo devient disponible.

Bibliothèques que j'ai rapidement disqualifié pour cette tâche:

• De Django reinhardt, urlize ne pas manipuler certains Tld correctement (ici est la langue officielle de liste de validité Tld. Pas de démo.
• autolink-js ne serait pas en mesure de détecter "www.google.com" sans http://, il n'est donc pas tout à fait adapté pour autolinking "casual Url" (sans jeu de protocole) trouvée en texte clair.
• Ben Alman du linkify n'a pas été entretenu depuis 2009.

Si vous insistez sur une expression régulière, le plus complet est le URL regexp de Composant, bien qu'il faussement détecter certains inexistante deux lettres Tld en le regardant.

J'ai fait quelques petites modifications à Travis code (juste pour éviter redeclaration - mais ça fonctionne très bien pour mes besoins, donc de nice job!!!):

function linkify(inputText) {
    var replacedText, replacePattern1, replacePattern2, replacePattern3;

    //URLs starting with http://, https://, or ftp://
    replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
    replacedText = inputText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>');

    //URLs starting with "www." (without //before it, or it'd re-link the ones done above).
    replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
    replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>');

    //Change email addresses to mailto:: links.
    replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
    replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>');

    return replacedText;
}

Merci, cela a été très utile. Je voulais aussi quelque chose qui permettrait de relier les choses qui ressemblait à une URL, comme une exigence de base, il avait un lien de quelque chose comme http://www.yahoo.com même si le protocole http://préfixe n'était pas présent. Donc en gros, si le "www" est présent, il va le lier et d'assumer c'est http://. Je voulais aussi e-mails à tourner dans les liens mailto:. EXEMPLE: http://www.yahoo.com serait converti à http://www.yahoo.com

Voici le code que j'ai fini avec (combinaison de code à partir de cette page, et d'autres trucs que j'ai trouvé en ligne, et d'autres trucs que j'ai fait sur mon propre):

function Linkify(inputText) {
    //URLs starting with http://, https://, or ftp://
    var replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
    var replacedText = inputText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>');

    //URLs starting with www. (without //before it, or it'd re-link the ones done above)
    var replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
    var replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>');

    //Change email addresses to mailto:: links
    var replacePattern3 = /(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim;
    var replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>');

    return replacedText
}

Dans le 2ème remplacer, le (^|[^/]) est un remplacement http://www.whatever.com si c'est pas déjà le préfixe //-- afin d'éviter une double liaison si une URL a déjà été liée à la première remplacer. Aussi, il est possible que http://www.whatever.com peut-être au début de la chaîne, qui est la première condition "ou" dans la partie de l'expression régulière.

Ceci pourrait être intégré comme un plugin jQuery que Jesse P illustré ci-dessus-mais j'ai souhaité spécifiquement une fonction régulière qui n'agissait pas sur un élément du DOM, parce que je prends tout le texte que j'ai et puis l'ajouter au DOM, et je veux que le texte soit "linkified" avant que je ajouter, donc j'ai passer le texte par le biais de cette fonction. Fonctionne très bien.

J'ai fait un changement de Roshambo Chaîne.linkify() à la emailAddressPattern à reconnaître [email protected] adresses

if(!String.linkify) {
    String.prototype.linkify = function() {

        //http://, https://, ftp://
        var urlPattern = /\b(?:https?|ftp):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*[a-z0-9-+&@#\/%=~_|]/gim;

        //www. sans http://or https://
        var pseudoUrlPattern = /(^|[^\/])(www\.[\S]+(\b|$))/gim;

        //Email addresses *** here I've changed the expression ***
        var emailAddressPattern = /(([a-zA-Z0-9_\-\.]+)@[a-zA-Z_]+?(?:\.[a-zA-Z]{2,6}))+/gim;

        return this
            .replace(urlPattern, '<a target="_blank" href="$&">$&</a>')
            .replace(pseudoUrlPattern, '$1<a target="_blank" href="http://$2">$2</a>')
            .replace(emailAddressPattern, '<a target="_blank" href="mailto:$1">$1</a>');
    };
}

Le meilleur scénario pour ce faire:
http://benalman.com/projects/javascript-linkify-process-lin/

Si vous avez besoin de montrer courtes (de domaine), mais avec la même URL, vous pouvez tenter ma modification de Sam Hasler la version en code affiché ci-dessus

function replaceURLWithHTMLLinks(text) {
    var exp = /(\b(https?|ftp|file):\/\/([-A-Z0-9+&@#%?=~_|!:,.;]*)([-A-Z0-9+&@#%?\/=~_|!:,.;]*)[-A-Z0-9+&@#\/%=~_|])/ig;
    return text.replace(exp, "<a href='$1' target='_blank'>$3</a>");
}

Reg Ex:
/(\b((https?|ftp|file):\/\/|(www))[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|]*)/ig

function UriphiMe(text) {
      var exp = /(\b((https?|ftp|file):\/\/|(www))[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|]*)/ig; 
      return text.replace(exp,"<a href='$1'>$1</a>");
}

Ci-dessous sont quelques-uns testé chaîne:

1. Me trouver sur http://www.google.com
2. www
3. Me retrouver sur www.http://www.com
4. Suivez-moi sur : http://www.nishantwork.wordpress.com
5. http://www.nishantwork.wordpress.com
6. Suivez-moi sur : http://www.nishantwork.wordpress.com
7. https://stackoverflow.com/users/430803/nishant

Remarque: Si vous ne voulez pas passer www comme valide une juste utilisation ci-dessous reg ex:
/(\b((https?|ftp|file):\/\/|(www))[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig

Corriger la détection d'URL avec des domaines internationaux & astral le support des caractères n'est pas chose banale. linkify-it bibliothèque construit regex de de nombreuses conditions, et la taille finale est d'environ 6 kilo-octets 🙂 . C'est plus précis que tous les libs, actuellement référence accepté de répondre.

Voir linkify-il de démonstration de vérifier en direct tous les cas de bord et de tester vos proches.

Si vous avez besoin de linkify source HTML, vous devez l'analyser d'abord, et de parcourir chaque texte jeton séparément.

J'ai eu à faire le contraire, et de faire des liens html dans l'URL, mais j'ai modifié votre regex et il fonctionne comme un charme, merci 🙂

var exp = /<a\s.*href=['"](\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])['"].*>.*<\/a>/ig; 

source = source.remplacer(exp,"$1"); 

Après l'entrée en provenance de plusieurs sources, j'ai maintenant une solution qui fonctionne bien. Il avait à faire avec l'écriture de votre propre code de remplacement.

Réponse.

Violon.

function replaceURLWithHTMLLinks(text) {
    var re = /(\(.*?)?\b((?:https?|ftp|file):\/\/[-a-z0-9+&@#\/%?=~_()|!:,.;]*[-a-z0-9+&@#\/%=~_()|])/ig;
    return text.replace(re, function(match, lParens, url) {
        var rParens = '';
        lParens = lParens || '';

        //Try to strip the same number of right parens from url
        //as there are left parens.  Here, lParenCounter must be
        //a RegExp object.  You cannot use a literal
        //    while (/\(/g.exec(lParens)) { ... }
        //because an object is needed to store the lastIndex state.
        var lParenCounter = /\(/g;
        while (lParenCounter.exec(lParens)) {
            var m;
            //We want m[1] to be greedy, unless a period precedes the
            //right parenthesis.  These tests cannot be simplified as
            //    /(.*)(\.?\).*)/.exec(url)
            //because if (.*) is greedy then \.? never gets a chance.
            if (m = /(.*)(\.\).*)/.exec(url) ||
                    /(.*)(\).*)/.exec(url)) {
                url = m[1];
                rParens = m[2] + rParens;
            }
        }
        return lParens + "<a href='" + url + "'>" + url + "</a>" + rParens;
    });
}

Voici ma solution:

var content = "Visit https://wwww.google.com or watch this video: https://www.youtube.com/watch?v=0T4DQYgsazo and news at http://www.bbc.com";
content = replaceUrlsWithLinks(content, "http://");
content = replaceUrlsWithLinks(content, "https://");
function replaceUrlsWithLinks(content, protocol) {
var startPos = 0;
var s = 0;
while (s < content.length) {
startPos = content.indexOf(protocol, s);
if (startPos < 0)
return content;
let endPos = content.indexOf(" ", startPos + 1);
if (endPos < 0)
endPos = content.length;
let url = content.substr(startPos, endPos - startPos);
if (url.endsWith(".") || url.endsWith("?") || url.endsWith(",")) {
url = url.substr(0, url.length - 1);
endPos--;
}
if (ROOTNS.utils.stringsHelper.validUrl(url)) {
let link = "<a href='" + url + "'>" + url + "</a>";
content = content.substr(0, startPos) + link + content.substr(endPos);
s = startPos + link.length;
} else {
s = endPos + 1;
}
}
return content;
}
function validUrl(url) {
try {
new URL(url);
return true;
} catch (e) {
return false;
}
}

Essayer Ci-Dessous La Solution

function replaceLinkClickableLink(url = '') {
let pattern = new RegExp('^(https?:\\/\\/)?'+
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|'+
'((\\d{1,3}\\.){3}\\d{1,3}))'+
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+
'(\\?[;&a-z\\d%_.~+=-]*)?'+
'(\\#[-a-z\\d_]*)?$','i');
let isUrl = pattern.test(url);
if (isUrl) {
return `<a href="${url}" target="_blank">${url}</a>`;
}
return url;
}