Essa é uma dica rápida para ajudar você a criar a tag HTML <a> com base em um link digitado dentro de uma string. Há alguns dias atrás tive esta duvida pois precisava ajudar a criar o link para as mensagens de texto que os clientes colocavam dentro de um sistema que estamos desenvolvendo. Então precisávamos fazer com que uma frase como:
Confira o site www.mundojs.com.br para mais informações, ou acesse nossa fanpage https://www.facebook.com/mundojs/ para receber mais noticias
Exibisse em tela da com os hiperlinks da seguinte forma:
Veja o site www.mundojs.com.br para mais informações, ou acesse nossa fanpage https://www.facebook.com/mundojs/ para receber mais noticias
Depois de pesquisar bastante por um solução que fosse A) inteligente e B) Eficiente, encotrei a seguinte função regex
function urlify(text) {
let urlRegex = /(https?:\/\/[^\s]+)/g;
return text.replace(urlRegex, function(url) {
return '<a href="' + url + '">' + url + '</a>';
})
/* ou de forma mais resumida */
/* return text.replace(urlRegex, '<a href="$1">$1</a>') */
}
let text = "Confira o site www.mundojs.com.br para mais informações, ou acesse nossa fanpage https://www.facebook.com/mundojs/ para receber mais noticias";
let html = urlify(text);
Com ela você poderá passar qualquer strings que você receberá seus links adaptados para que em uma pagina HTMl possa exibi-los corretamente.