[DUVIDA JAVASCRIPT] reconhecimento de URL em um texto

bom dia/tarde/noite, tudo bem? :)

Estou com uma duvida e eu não faço ideia de como pesquisar isso no google kskksks Então decidi fazer esta minha primeira publicação.

Tenho uma aplicação que permite o usuario publicar videos, e este video possui uma descrição. Gostaria que fosse possivel o usuario publicador digitar por exemplo uma url no input e para o usuario final, essa url aparecer clicavel

Exemplo:

var texto = "Link muito daora mesmo: http://linkDaora.com.br/daora acessa ae"

<p>
    Link muito daora mesmo: 
    <a href="http://linkDaora.com.br/daora">http://linkDaora.com.br/daora</a> 
    acessa ae
</p>

Existe ainda a possibilidade do usuario digitar mais de uma URL:

var texto = "link Daora: http://linkDaora.com.br/daora link maneiro: http://linkManeiro.com.br/maneiro"

<p>
    Link daora: 
    <a href="http://linkDaora.com.br/daora">http://linkDaora.com.br/daora</a> 
    link maneiro: 
    <a href="http://linkManeiro.com.br/maneiro">http://linkManeiro.com.br/maneiro</a> 
</p>

Conto com a ajuda de vocês :) Muito obrigado!

zbt5015há 2 anos

O que pesquisar?

Regex string replace loops

var texto = "Link muito daora mesmo: http://linkDaora.com.br/daora acessa ae http://linkDaora.com.br/daora"

// Usa uma expressão regular para encontrar todos os links na string
var regex = /(https?:\/\/[^\s]+)/g;
var matches = texto.match(regex);

// Para cada link encontrado na string...
matches.forEach(function(link) {
  // Substitui o link na string por um elemento <a> com o link e o texto
  texto = texto.replace(link, "<a href='" + link + "'>" + link + "</a>");
});
    
// Adiciona a string modificada ao seu documento HTML
document.body.innerHTML = texto;

Matches armazena todas incidências de um link na string Mathes então é um array percorremos todo o array de LINKs usando Foreach para cada link do foreach substitumos ele da string original para ele em formato ahref e então damos um innerhtml, q é colocar a nova string html no html

allangrdshá 2 anos

Olá @OTalDoMolas, tudo bem?

O que eu recomendo fortemente que você procure estudar é Regex - uma expressão regular, ou Regex, são padrões utilizados para identificar determinadas combinações ou cadeias de caracteres em uma string.

Sobre a solução para que o você falou:

function urlify(text) {
  const urlRegex = /(https?:\/\/[^\s]+)/g

  return text.replace(urlRegex, function(url) {
    return '<a href="' + url + '">' + url + '</a>'
  })
}

const text = 'Find me at http://www.example.com and also at http://stackoverflow.com'
const html = urlify(text)

console.log(html)

Referências