Identify URLs and create links

2

If I have text, for example:

  

Visit www.stackoverflow.com to get your questions answered.

How do I identify the URL and link to it:

Acesse o <a href="www.stackoverflow.com">www.stackoverflow.com</a> para tirar suas dúvidas.

Preferably using JavaScript or Java.

    
asked by anonymous 10.04.2014 / 18:48

3 answers

4

To perform this task, the technique is the same as for BBCode. You need to use regular expressions to identify possible URL's and substitutes for filled anchors.

I've created an expression to exemplify with javascript: link

Once you have created the expression to isolate the possible URL's, you will use the String.prototype.replace function to replace these by anchors, retrieving the main part for the hyper text reference ( href ).

See an example:

var

    reURL = /((?:http(s)?:\/\/)?(?:www(\d)?\.)?([\w\-]+\.\w{2,})\/?((?:\?(?:[\w\-]+(?:=[\w\-]+)?)?(?:&[\w\-]+(?:=[\w\-]+)?)?))?(#(?:[^\s]+)?)?)/g,

    text = 'Acesse o www.stackoverflow.com para tirar suas dúvidas.',

    html = text.replace(reURL, '<a href="http$2://www$3.$4$5$6">$1</a>');

In this case the variable html will contain the same value as text, however replacing URLs with anchors.

You can also create a function to make it more efficient:

String.prototype.URLToAnchors = function() {

    return this.replace(/((?:http(s)?:\/\/)?(?:www(\d)?\.)?([\w\-]+\.\w{2,})\/?((?:\?(?:[\w\-]+(?:=[\w\-]+)?)?(?:&[\w\-]+(?:=[\w\-]+)?)?))?(#(?:[^\s]+)?)?)/g, '<a href="http$2://www$3.$4$5">$1</a>');

}

The usage looks like this:

'Acesse o www.stackoverflow.com para tirar suas dúvidas.'.URLToAnchors();

10.04.2014 / 19:39
1

You can use regular expressions regex , to search for combinations in the string, see:

        str = "Lorem ipsum dolor www.stackoverflow.com sit amet, consectetur adipiscing elit. 
               Morbi sit amet ultricies nunc";
        var regexp = /(?:www\.|(?!www))[^\s\.]+\.[^\s]{2,}|www\.[^\s]+\.[^\s]{2,}/gi;
        var matches_array = str.match(regexp);

JS Fiddle Example

    
10.04.2014 / 19:23
0

That's the solution, including truncating too large URLs to improve display

var expressao_regular_url = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/;

function isUrl(texto)
{
    return expressao_regular_url.test(texto);
}

function urlTruncada(url)
{
    var limite_1 = 30;
    var limite_2 = 15;
    var reticencias = '[...]';
    if (url.length > limite_1 + limite_2 + reticencias.length)
    {
        url =
            url.substring(0, limite_1) + 
            reticencias + 
            url.substring(url.length - limite_2);
    }
    return url;
}

function autoUrl(texto)
{
    var texto_saida = '';
    var token = '';
    var caractere_fim_texto = String.fromCharCode(3);
    var separadores = ['\r', '\n', ' ', caractere_fim_texto];
    var caractere = '';
    var length_texto = texto.length;
    texto += caractere_fim_texto;
    for (var i in texto)
    {
        caractere = texto[i];
        if (separadores.indexOf(caractere) >= 0)
        {
            if (token)
            {
                if (isUrl(token))
                {
                    texto_saida += 
                        '<a href="' + (token.search('://') < 0 ? 'http://' : '') + token + '" target="_blank">' + 
                            urlTruncada(token) + 
                        '</a>';
                }
                else
                {
                    texto_saida += token;
                }
                token = '';
                if (parseInt(i) < length_texto)
                {
                    texto_saida += caractere;
                }
            }
        }
        else
        {
            token += caractere;
        }
    }
    return texto_saida;
}
    
12.10.2017 / 23:14