Skip to main content
Resolvendo o problema de remover os elementos existentes
Fonte Link
codermarcos
  • 449
  • 4
  • 17

Explicação:

Explicação:

  • criarLink

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

criarLink

  1. Seleciona o devido elemento comRecebe uma palavra e inseri em um querySelectorTemplete String de uma tag a

criarArrayDeLinks

  1. Pega o texto do elemento usando textContent
  2. Realiza uma separação da stringstring por espaço, transformando a um array usando o .split()
  3. OFiltra o array removendo posições vazias ou quebra de linha com .reduce() reduz.filter()
  4. Mapeia o nosso array de palavras para um array de tags usando o metodo arraycriarLink em umausando 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 stringNÃO novamente usandofor 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 criarLinkcriarArrayDeLinks 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 stringstring 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
constvar 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>`;a>`

functionvar criarTextoClicavelcriarArrayDeLinks = e => e.textContent.split(seletor' ').filter(i {=> i 
 !== '' const&& divi =!== document'\n').querySelectormap(seletori => criarLink(i));

function criarLinksEmElementos(pai) {
  div.innerHTMLconst tags = div[];

  if (pai.nodeType == 3 && pai.textContent.trim()) { 
    tags.push(...criarArrayDeLinks(e));
  } else {           
    pai.splitchildNodes
       .forEach(' 
 ')         e => {         
            if (e.nodeType == 3 && e.textContent.trim()) { 
              tags.reducepush(...criarArrayDeLinks(e));
            } else {          
              tags.push(ant,criarLinksEmElementos(e).outerHTML);
 atu           }
        });
 => `${ant} 
 ${criarLink 
  if (atutags.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>

Explicação:

  • criarLink

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

  1. Seleciona o devido elemento com querySelector
  2. Pega o texto do elemento usando textContent
  3. Realiza uma separação da string por espaço, transformando a um array usando o .split()
  4. O .reduce() reduz o array em uma string novamente usando a função criarLink
  5. Por fim atribuo a string na div novamente usando o innerHTML para converter o texto em html
const 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>`;

function criarTextoClicavel(seletor) {  
   const div = document.querySelector(seletor);
  div.innerHTML = div.textContent
                     .split(' ')
                     .reduce(
                       (ant, atu) => `${ant} ${criarLink(atu)}`
                     ,'');
}

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

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>
Melhorando formatação e Adicionando referencias
Fonte Link
codermarcos
  • 449
  • 4
  • 17

Explicação:

  • criarLink

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

  1. Seleciona o devido elemento com querySelector
  2. Pega o texto do elemento usando textContent
  3. Realiza uma separação da string por espaço, transformando a um array usando o .split()
  4. O .reduce() reduz o array em uma string novamente usando a função criarLink
  5. Por fim atribuo a string na div novamente usando o innerHTML para converter o texto em html

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

function criarTextoClicavel(seletor) {  
  const div = document.querySelector(seletor);
  div.innerHTML = div.textContent
                     .split(' ')
                     .reduce(
                       (ant, atu) => `${ant} ${getLinkcriarLink(atu)}`
                     ,'');
}

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

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

function criarTextoClicavel(seletor) {  
  const div = document.querySelector(seletor);
  div.innerHTML = div.textContent
                     .split(' ')
                     .reduce(
                       (ant, atu) => `${ant} ${getLink(atu)}`
                     ,'');
}

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

Explicação:

  • criarLink

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

  1. Seleciona o devido elemento com querySelector
  2. Pega o texto do elemento usando textContent
  3. Realiza uma separação da string por espaço, transformando a um array usando o .split()
  4. O .reduce() reduz o array em uma string novamente usando a função criarLink
  5. Por fim atribuo a string na div novamente usando o innerHTML para converter o texto em html

const 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>`;

function criarTextoClicavel(seletor) {  
  const div = document.querySelector(seletor);
  div.innerHTML = div.textContent
                     .split(' ')
                     .reduce(
                       (ant, atu) => `${ant} ${criarLink(atu)}`
                     ,'');
}

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

Fonte Link
codermarcos
  • 449
  • 4
  • 17

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

function criarTextoClicavel(seletor) {  
  const div = document.querySelector(seletor);
  div.innerHTML = div.textContent
                     .split(' ')
                     .reduce(
                       (ant, atu) => `${ant} ${getLink(atu)}`
                     ,'');
}

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