Identify Urls and create links

Asked

Viewed 1,661 times

2

If I have a 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.

  • 3

    You have a text where exactly?

  • 2

    Javascript and Java are very different, and used in very different situations. Could you clarify in what situation you need it? On the server or client?

  • Iss same @bfavaretto, on front and back-end.

3 answers

4


To accomplish this task, the technique is the same used for Bbcode. You need to use regular expressions to identify possible Urls and replace them with filled anchors.

I created an expression to exemplify with javascript: http://rubular.com/r/btYgux8UTc

After creating the expression to isolate possible URL’s, you will use the function String.prototype.replace to replace these with anchors, retrieving the main part for Hyper text Reference (href).

Take 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 now contains the same value as text, but replacing URL’s 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 use gets like this:

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

This squeeze I created should be used for the most diverse URL formats with search, URL comments, security protocol etc... In case someone has in mind to improve something please share the permanent link.

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

Example JS Fiddle

0

This is the solution, including truncating very large Urls to improve the 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;
}

Browser other questions tagged

You are not signed in. Login or sign up in order to post.