Explicação:
Explicação:
criarLink
- Recebe uma palavra e inseri em um Templete String de uma tag a
criarTextoClicavel
criarLink
- Seleciona o devido elemento comRecebe uma palavra e inseri em um querySelectorTemplete String de uma tag a
criarArrayDeLinks
- Pega o texto do elemento usando textContent
- Realiza uma separação da stringstring por espaço, transformando a um array usando o .split()
- OFiltra o array removendo posições vazias ou quebra de linha com .reduce() reduz.filter()
- Mapeia o nosso array de palavras para um array de tags usando o metodo arraycriarLink em umausando o prototype .map()
criarLinksEmElementos
- Crio um array chamado tags que recebera nossos links e elementos filhos no formato string
- Recebe o elemento pai verficando se o nodeType é 3(Text)
- 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.
- Caso o nodeType seja 3(Text) chamo a função criarLinkcriarArrayDeLinks que me retorna um array
- Realizo a desestruturação do array usando o spread operator da es6 para atribui-lo ao array tags diretamente.
- Verifico se o array contem algo
- Se conter seu limpo o elemento pai com o innerHTML
- Junto o array em uma string separando por espaço usando o .join
- Por fim atribuo a stringstring na div novamente usando o innerHTML para converter o texto em html
criarTextoClicavel
- Seleciona o devido elemento com querySelector
- 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>