4
respostas

Como criar links a partir de uma entrada de texto?

No Facebook, Twitter e Instagram, se você escreve um link ou se fizer uma menção a um usuário, por exemplo @nomedapessoa automaticamente vira um link. Como seria possível fazer isso em JavaScript? Por exemplo, o usuário insere uma string em um textarea e ai se tiver um link virar uma tag A ou se mencionar um usuário @nomeusuario ou uma hashtag #nomedahash isso virar uma tag? (acredito que com expressões regulares, mas tenho ideia como de seria isso)

4 respostas

Desiree, tudo bom?

Você verá isso com mais detalhes se estudar, por exemplo, React. O sistema fica "escutando" o que você digita, quando insere um "@" ele já fica esperando se a sequência será uma String e vai trazer para você uma lista de nomes (usuários). Veja que o "@" no meio de um endereço de e-mail não vai gerar isso.

Obrigado pela resposta. Esse método de "escutar" eu poderia usar o onkeyup() do JavaScript e fazer algo parecido, mas isso seria uma boa prática?

Sim, é uma possibilidade. Dá uma olhada nesse vídeo:

https://www.youtube.com/watch?v=fznUnmp_I3w

O keyup é uma boa opção para "ouvir". Até ai beleza, mas como transformar essa palavra que começa com @ ou # em um link "", e entendendo que ao encontrar um espaço, o link precisa ser fechado com "". Um ponto importante é que não estou tentando fazer esse processamento depois que o campo de textarea é submetido por exemplo. Quero fazer essa conversão ao mesmo tempo que o usuário digita (assim como é no Facebook ou Instagram)