Como substituir URLs simples por links?

Estou usando a função abaixo para corresponder a URLs dentro de um determinado texto e substituí-los por links HTML. A expressão regular está funcionando muito bem, mas atualmente estou substituindo apenas a primeira correspondência.

Como posso substituir todo o URL? Acho que deveria estar usando o comando exec , mas realmente não sabia como fazê-lo.

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

Primeiro, rolar seu próprio regexp para analisar URLs é uma péssima idéia . Você deve imaginar que este é um problema comum o suficiente para que alguém tenha escrito, depurado e testado uma biblioteca para ele, de acordo com as RFCs . Os URIs são complexos - verifique o código para análise de URL no Node.js e a página da Wikipedia em esquemas de URI .

Existem muitos casos extremos quando se trata de analisar URLs: nomes de domínio internacionais , TLDs reais ( .museum) vs. inexistentes ( .etc), pontuação estranha incluindo parênteses , pontuação no final da URL, nomes de host IPV6 etc.

Eu olhei para uma tonelada de bibliotecas , e há algumas que valem a pena usar, apesar de algumas desvantagens:

• O linkify da Soapbox sofreu um grande esforço, e um grande refatorador em junho de 2015 removeu a dependência do jQuery . Ainda tem problemas com os IDNs .
• O AnchorMe é um recém-chegado que afirma ser mais rápido e mais enxuto. Alguns problemas com IDNs também.
• O Autolinker.js lista os recursos de maneira muito específica (por exemplo, " hrefLidará adequadamente com a entrada HTML. O utilitário não alterará o atributo dentro das tags anchor ()" ). Vou fazer alguns testes quando uma demonstração estiver disponível .

Bibliotecas que eu desqualifiquei rapidamente para esta tarefa:

• O URL do Django não lidou com determinados TLDs corretamente (aqui está a lista oficial de TLDs válidos . Nenhuma demonstração .
• autolink-js não detectaria "www.google.com" sem http: //, portanto, não é adequado para vincular automaticamente "URLs casuais" (sem um esquema / protocolo) encontrados em texto sem formatação.
• O linkify de Ben Alman não é mantido desde 2009.

Se você insiste em uma expressão regular, o mais abrangente é o regexp de URL do Component , embora ele detecte falsamente alguns TLDs de duas letras inexistentes olhando para ele.

Substituindo URLs por Links (Resposta ao Problema Geral)

A expressão regular na pergunta perde muitos casos extremos. Ao detectar URLs, é sempre melhor usar uma biblioteca especializada que lida com nomes de domínio internacionais, novos TLDs .museum, parênteses e outras pontuações dentro e no final da URL e muitos outros casos extremos. Veja a postagem de Jeff Atwood no blog The Problem With URLs para uma explicação de alguns dos outros problemas.

O melhor resumo das bibliotecas correspondentes a URL está na resposta de Dan Dascalescu
(em fevereiro de 2014)

"Fazer uma expressão regular substituir mais de uma correspondência" (resposta ao problema específico)

Adicione um "g" ao final da expressão regular para ativar a correspondência global:

/ig;

Mas isso apenas resolve o problema na pergunta em que a expressão regular estava substituindo apenas a primeira correspondência. Não use esse código.

Fiz algumas pequenas modificações no código de Travis (apenas para evitar redeclarações desnecessárias - mas está funcionando muito bem para as minhas necessidades, um ótimo trabalho!):

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;
}

Fiz algumas otimizações no Linkify()código de Travis acima. Também corrigi um erro em que endereços de email com formatos de subdomínio não correspondiam (por exemplo, exemplo@domínio.com.br).

Além disso, alterei a implementação para criar um protótipo da Stringclasse para que os itens possam ser correspondidos da seguinte maneira:

var text = 'address@example.com';
text.linkify();

'http://stackoverflow.com/'.linkify();

Enfim, aqui está o script:

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
        var emailAddressPattern = /[\w.]+@[a-zA-Z_-]+?(?:\.[a-zA-Z]{2,6})+/gim;

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

Obrigado, isso foi muito útil. Eu também queria algo que vinculasse coisas que parecessem uma URL - como requisito básico, vincularia algo como www.yahoo.com, mesmo que o prefixo do protocolo http: // não estivesse presente. Então, basicamente, se "www". está presente, ele o vincula e assume que é http: //. Eu também queria que os e-mails se transformassem em mailto: links. EXEMPLO: www.yahoo.com seria convertido em www.yahoo.com

Aqui está o código que eu terminei (combinação de código desta página e outras coisas que encontrei on-line e outras que fiz sozinho):

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
}

Na segunda substituição, a parte (^ | [^ /]) está substituindo apenas www.whatever.com se ainda não tiver sido prefixado por // - para evitar a vinculação dupla se um URL já estiver vinculado na primeira substituição. Além disso, é possível que www.whatever.com esteja no início da string, que é a primeira condição "ou" nessa parte da regex.

Isso poderia ser integrado como um plug-in jQuery, como Jesse P ilustrou acima - mas eu queria especificamente uma função regular que não estivesse atuando em um elemento DOM existente, porque estou pegando o texto que tenho e adicionando-o ao DOM, e Quero que o texto seja "vinculado" antes de adicioná-lo, então passo o texto por essa função. Funciona bem.

A identificação de URLs é complicada porque eles geralmente são cercados por sinais de pontuação e porque os usuários frequentemente não usam o formulário completo do URL. Existem muitas funções JavaScript para substituir URLs por hiperlinks, mas não consegui encontrar uma que funcione tão bem quanto o urlizefiltro na estrutura da Web baseada em Python Django. Por isso, portamos a urlizefunção do Django para JavaScript:

https://github.com/ljosa/urlize.js

Um exemplo:

urlize('Go to SO (stackoverflow.com) and ask. <grin>', 
       {nofollow: true, autoescape: true})
=> "Go to SO (<a href="http://stackoverflow.com" rel="nofollow">stackoverflow.com</a>) and ask. &lt;grin&gt;"

O segundo argumento, se verdadeiro, faz rel="nofollow"com que seja inserido. O terceiro argumento, se verdadeiro, escapa caracteres com significado especial em HTML. Veja o arquivo LEIA-ME .

Fiz uma alteração no Roshambo String.linkify () no emailAddressPattern para reconhecer os endereços aaa.bbb. @ Ccc.ddd

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>');
    };
}

Eu procurei no google por algo mais novo e deparei com este:

$('p').each(function(){
   $(this).html( $(this).html().replace(/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '<a href="$1">$1</a> ') );
});

demo: http://jsfiddle.net/kachibito/hEgvc/1/

Funciona muito bem para links normais.

O melhor script para fazer isso: http://benalman.com/projects/javascript-linkify-process-lin/

Essa solução funciona como muitas outras e, de fato, usa o mesmo regex que um deles, no entanto, em vez de retornar uma String HTML, isso retornará um fragmento de documento que contém o elemento A e quaisquer nós de texto aplicáveis.

 function make_link(string) {
    var words = string.split(' '),
        ret = document.createDocumentFragment();
    for (var i = 0, l = words.length; i < l; i++) {
        if (words[i].match(/[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi)) {
            var elm = document.createElement('a');
            elm.href = words[i];
            elm.textContent = words[i];
            if (ret.childNodes.length > 0) {
                ret.lastChild.textContent += ' ';
            }
            ret.appendChild(elm);
        } else {
            if (ret.lastChild && ret.lastChild.nodeType === 3) {
                ret.lastChild.textContent += ' ' + words[i];
            } else {
                ret.appendChild(document.createTextNode(' ' + words[i]));
            }
        }
    }
    return ret;
}

Existem algumas ressalvas, nomeadamente com o suporte do IE e do textContent mais antigo.

aqui está uma demonstração.

Se você precisar mostrar um link mais curto (apenas domínio), mas com o mesmo URL longo, tente minha modificação da versão do código de Sam Hasler postada acima

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

Abaixo estão algumas strings testadas:

1. Encontre-me em www.google.com
2. www
3. Encontre-me em www. http://www.com
4. Siga-me em: http://www.nishantwork.wordpress.com
5. http://www.nishantwork.wordpress.com
6. Siga-me em: http://www.nishantwork.wordpress.com
7. https://stackoverflow.com/users/430803/nishant

Nota: Se você não quiser passar wwwcomo válido, use abaixo de reg ex: /(\b((https?|ftp|file):\/\/|(www))[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig

Os avisos sobre a complexidade do URI devem ser observados, mas a resposta simples para sua pergunta é:
Para substituir todas as correspondências, você precisa adicionar o /gsinalizador ao final do RegEx:
/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi

/**
 * Convert URLs in a string to anchor buttons
 * @param {!string} string
 * @returns {!string}
 */

function URLify(string){
  var urls = string.match(/(((ftp|https?):\/\/)[\-\w@:%_\+.~#?,&\/\/=]+)/g);
  if (urls) {
    urls.forEach(function (url) {
      string = string.replace(url, '<a target="_blank" href="' + url + '">' + url + "</a>");
    });
  }
  return string.replace("(", "<br/>(");
}

exemplo simples

Mantenha simples! Diga o que você não pode ter, em vez do que você pode ter :)

Como mencionado acima, os URLs podem ser bastante complexos, especialmente após o '?', E nem todos começam com um 'www'. por exemplomaps.bing.com/something?key=!"£$%^*()&lat=65&lon&lon=20

Portanto, em vez de ter uma regex complexa que não atenda a todos os casos extremos e será difícil de manter, que tal essa mais simples, que funciona bem para mim na prática.

Combine

http(s):// (anything but a space)+

www. (anything but a space)+

Onde "qualquer coisa" é [^'"<>\s] ... basicamente uma combinação gananciosa, levando você a encontrar um espaço, cotação, colchete angular ou fim de linha

Além disso:

Lembre-se de verificar se ele ainda não está no formato de URL, por exemplo, o texto contém href="..."ousrc="..."

Adicione ref = nofollow (se apropriado)

Essa solução não é tão "boa" quanto as bibliotecas mencionadas acima, mas é muito mais simples e funciona bem na prática.

if html.match( /(href)|(src)/i )) {
    return html; // text already has a hyper link in it
    }

html = html.replace( 
            /\b(https?:\/\/[^\s\(\)\'\"\<\>]+)/ig, 
            "<a ref='nofollow' href='$1'>$1</a>" 
            );

html = html.replace( 
            /\s(www\.[^\s\(\)\'\"\<\>]+)/ig, 
            "<a ref='nofollow' href='http://$1'>$1</a>" 
            );

html = html.replace( 
             /^(www\.[^\s\(\)\'\"\<\>]+)/ig, 
            "<a ref='nofollow' href='http://$1'>$1</a>" 
            );

return html;

A detecção correta de URL com domínios internacionais e suporte a caracteres astrais não é algo trivial. linkify-itA biblioteca cria regex a partir de várias condições e o tamanho final é de aproximadamente 6 kilobytes :). É mais preciso do que todas as bibliotecas, atualmente referenciado em resposta aceita.

Veja a demonstração do linkify-it para verificar ao vivo todos os casos extremos e testar os seus.

Se precisar vincular a fonte HTML, você deve analisá-la primeiro e iterar cada token de texto separadamente.

Eu escrevi ainda outra biblioteca JavaScript, talvez seja melhor para você, pois é muito sensível com o mínimo possível de falsos positivos, rápida e pequena. No momento, estou mantendo-o ativamente, portanto, teste-o na página de demonstração e veja como isso funcionaria para você.

link: https://github.com/alexcorvi/anchorme.js

Eu tive que fazer o oposto e criar links html apenas na URL, mas modifiquei seu regex e ele funciona como um encanto, obrigado :)

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

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

A detecção de email na resposta do Travitron acima não funcionou para mim, então eu a estendi / substituí pela seguinte (código C #).

// Change e-mail addresses to mailto: links.
const RegexOptions o = RegexOptions.Multiline | RegexOptions.IgnoreCase;
const string pat3 = @"([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,6})";
const string rep3 = @"<a href=""mailto:$1@$2.$3"">$1@$2.$3</a>";
text = Regex.Replace(text, pat3, rep3, o);

Isso permite endereços de email como " firstname.secondname@one.two.three.co.uk ".

Após a entrada de várias fontes, agora tenho uma solução que funciona bem. Tinha a ver com escrever seu próprio código de substituição.

Resposta .

Violino .

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;
    });
}

Substitua URLs no texto por links HTML, ignore os URLs dentro de uma tag href / pre. https://github.com/JimLiu/auto-link

Aqui está a minha solução:

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;
    }
}

Experimente a função abaixo:

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

alert(anchorify("Hola amigo! https://www.sharda.ac.in/academics/"));

Experimente abaixo a solução

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;
}