1

Em uma página em html como fazer para as palavras do texto serem convertidas em links? para que ao clicar em determinada palavra, abrir a página google translate com a tradução da palavra.

Por exemplo, nesta frase:

"The universe is to everyone"

Se o usuário clicar me "The" vai abrir o link

https://translate.google.com/m/translate?ie=UTF8&sl=pt-BR&tl=en&q=#en/pt/The

Se clicar em universe abre

https://translate.google.com/m/translate?ie=UTF8&sl=pt-BR&tl=en&q=#en/pt/universe

5
  • Você que criar um link para todas as palavras do texto: "The", "universe", "is", "to", "everyone"?.. se não, qual o critério a ser adotado?
    – Sam
    Commented 19/07/2018 às 20:23
  • E se tiver um ponto, uma vírgula... por isso seria preciso definir um critério e aplicar apenas o link a palavras à partir de uma lista de palavras pré-determinadas.
    – Sam
    Commented 19/07/2018 às 21:06
  • @sam isso, para todas as palavras separadamente, tem que ver também que deve desconsiderar números e pontuação. Vou testar as respostas propostas aqui Commented 19/07/2018 às 21:31
  • 1
    Só serve palavra por palavra? Fiz um exemplo que pode ser o que for selecionado, inclusive todo o texto,
    – user60252
    Commented 19/07/2018 às 23:26
  • Show Léo, é interessante esta opção também, obrigado! Commented 20/07/2018 às 1:18

4 Respostas 4

4

Explicação:

criarLink

  1. Recebe uma palavra e inseri em um Templete String de uma tag a

criarArrayDeLinks

  1. Pega o texto do elemento usando textContent
  2. Realiza uma separação da string por espaço, transformando a um array usando o .split()
  3. Filtra o array removendo posições vazias ou quebra de linha com .filter()
  4. Mapeia o nosso array de palavras para um array de tags usando o metodo criarLink usando o prototype .map()

criarLinksEmElementos

  1. Crio um array chamado tags que recebera nossos links e elementos filhos no formato string
  2. Recebe o elemento pai verficando se o nodeType é 3(Text)
  3. Se seu nodeType NÃO for 3(Text) ele verifica se tem elementos filho e se os mesmos são do tipo 3(Text) se não ele cria uma recursividade chamando a si mesmo.
  4. Caso o nodeType seja 3(Text) chamo a função criarArrayDeLinks que me retorna um array
  5. Realizo a desestruturação do array usando o spread operator da es6 para atribui-lo ao array tags diretamente.
  6. Verifico se o array contem algo
  7. Se conter seu limpo o elemento pai com o innerHTML
  8. Junto o array em uma string separando por espaço usando o .join
  9. Por fim atribuo a string na div novamente usando o innerHTML para converter o texto em html

criarTextoClicavel

  1. Seleciona o devido elemento com querySelector
  2. Chamo a função criarLinksEmElementos passando o resultado obtido no passo anterior

var criarLink = t => `<a target="_blank" href="https://translate.google.com/m/translate?ie=UTF8&sl=pt-BR&tl=en&q=#en/pt/${t}">${t}</a>`

var criarArrayDeLinks = e => e.textContent.split(' ').filter(i => i !== '' && i !== '\n').map(i => criarLink(i));

function criarLinksEmElementos(pai) {
  const tags = [];

  if (pai.nodeType == 3 && pai.textContent.trim()) { 
    tags.push(...criarArrayDeLinks(e));
  } else {          
    pai.childNodes
       .forEach(
          e => {         
            if (e.nodeType == 3 && e.textContent.trim()) { 
              tags.push(...criarArrayDeLinks(e));
            } else {          
              tags.push(criarLinksEmElementos(e).outerHTML);
            }
        });
  }
  
  if (tags.length) {    
    pai.innerHTML = tags.join(' ');    
  }

  return pai;  
}

function criarTextoClicavel(seletor) {  
  const div = document.querySelector(seletor);
  criarLinksEmElementos(div);
}

criarTextoClicavel('#texto-clicavel');
/* caso queria remover o efeito do link */
a {
  text-decoration: none;
  color: black;
}
<div id="texto-clicavel">
  <p>
    The universe is to everyone
  </p>
  <p>
    The <b>universe</b> is to <i>everyone</i>
  </p>
</div>

6
  • 1
    Achei até que seria negativado pela pergunta, mas sua resposta está massa, vou testar. Muito obrigado! Commented 19/07/2018 às 21:58
  • 1
    Marcos, nesse caso ele não retorna o html no layout que estava antes, ou seja, remove os parágrafos e todas tags html, deixando o texto sem nenhuma formatação de layout Commented 20/07/2018 às 10:48
  • 1
    Acredito que teria que considerar pelo menos os parágrafos Commented 20/07/2018 às 12:34
  • 1
    @MiguelSilva não sei se ainda vai ajudar mas esta ai o que tinha comentado. Commented 23/07/2018 às 14:49
  • 1
    Muito boa explicação. Commented 6/03/2023 às 14:40
2

Uma solução é:

  • dividir o texto em palavras com split
  • pegar em todas as palavras e transformar num link com map
  • juntar tudo de novo com join
  • voltar a aplicar o novo texto como html no local certo

Exemplo:

function aplicaLink(texto){
  return `<a href="https://translate.google.com/m/translate?ie=UTF8&sl=pt-BR&tl=en&q=#en/pt/${texto}">${texto}</a>`;
}

const divTexto = document.getElementById("div1");
divTexto.innerHTML = divTexto.innerHTML.split(' ').map(aplicaLink).join(' ');
<div id="div1">The universe is to everyone</div>

2

A minha solução passa por criar um link com a/as palavra/palavras selecionadas.

  • getSelection() - Retorna um objeto Selection representando a parte do texto selecionada pelo usuário. Coloco isso em uma variável para concatenar ao link.

Infelizmente aqui ao executar o exemplo, o link criado no topo do texto só abre se clicar com o direito do mouse e selecionar abrir em nova aba ou em nova janela.

Mas no servidor abre clicando diretamente no link criado

JavaScript

   function showSelection() {
     document.getElementById('demo').innerHTML = document.getSelection();
     var variavel=document.getElementById('demo').innerHTML;
     if (variavel!=""){
        //o texto do link         
        document.getElementById("demo").text = "Traduzir texto selecionado";
        //o atributo href do link         
        document.getElementById("demo").setAttribute("href", "https://translate.google.com/m/translate?ie=UTF8&sl=pt-BR&tl=en&q=#en/pt/"+variavel);
     }
              
  }

  document.captureEvents(Event.MOUSEUP)

  document.onmouseup = showSelection

HTML

<a id='demo' target='_blank' href=''></a>    
    
<!-- daqui para baixo coloque seu HTML -->
   
7
  • Testei no exemplo funcional que deu e só abre se clicar com botão direito do mouse Commented 20/07/2018 às 1:25
  • @MiguelSilva, qual navegador?
    – user60252
    Commented 20/07/2018 às 1:27
  • Firefox 61.0.1 Quantum Commented 20/07/2018 às 1:29
  • @MiguelSilva, é verdade, muita coisa não funciona no firefox. Bad browser
    – user60252
    Commented 20/07/2018 às 1:32
  • 1
    @MiguelSilva testei aqui com todos os navegadores, só o firefox deixou a desejar
    – user60252
    Commented 20/07/2018 às 1:36
0

Você pode criar uma função javascript para abrir uma nova aba e recebe a palavra que deseja traduzir.

function abrePagina(palavra){
   window.open("https://translate.google.com/m/translate?ie=UTF8&sl=pt-BR&tl=en&q=#en/pt/"+palavra ,"_blank");  
}

Com a função é necessário adicionar o evento de click em cada palavra que deseja traduzir.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .