3

Se na pagina conter as palavras "contato", "ajuda" e outras.. transformar-las em um link:

<a href='http://meusite.com/pagina1.html'>contato</a>

<a href='http://meusite.com/pagina2.html'>ajuda</a>

Exemplo:

Você talvez precise de ajuda, caso tenha duvidas entre em contato conosco

2 Respostas 2

5

Esta solução usa replace com Expressão Regular para substituir as ocorrências. Porém é necessário que o texto a ser analisado esteja dentro de alguma tag.

Exemplo:

document.addEventListener("DOMContentLoaded", function(){
   var links = {
      "contato aqui": "linkcontatoaqui.html",
      "abaixo-assinado": "linkaabaixoassinado.html",
      "ajuda": "linkajuda.html",
      "linha": "linklinha.html"
   }
   
   var bodi = document.querySelectorAll("body *:not(script)");
   for(var x=0; x<bodi.length; x++){
      var html = bodi[x].innerHTML;
      for(var i in links){
         var re = new RegExp("\\b(?![^<]*?>)("+i+")(?!>)", "gi");
         html = html.replace(re, ' <a href="'+links[i]+'">$1</a>');
      }
      bodi[x].innerHTML = html;
   }
});
Contato ← este não é alterado porque não está dentro de uma tag
<div class="ajuda">
<div data-url="http://ajuda.com">ajuda</div>
   <br>
   abaixo-assinado galinha ou linha
   <br>
   Você talvez precise de ajuda, caso tenha duvidas entre em Contato conosco
   <p>Você talvez precise de Ajuda caso tenha duvidas entre em contato.</p>
</div>
<p>Você talvez precise de Ajuda caso tenha duvidas entre em contato aqui ajuda.</p>

A expressão "\\b(?![^<]*?>)("+i+")(?!>)" irá buscar no HTML dos elementos cada nome dos itens do objeto links e fazer o replace pelo grupo $1 e aplicando o seu respectivo valor na tag <a>.

Pelo padrão da expressão regular, só serão substituídas as palavras que não estiverem dentro dos limitadores de tags <> (atributos, propriedades etc.). O gi são as opções da expressão. O g irá capturar todas as ocorrências, e o i irá ignorar o case sensitive (veja que no exemplo tanto a palavra "ajuda" quanto "Ajuda" foram substituídas).

Este seletor document.querySelectorAll("body *:not(script)"); irá selecionar todos os elementos que estiver no body (exceto textos fora de tags, conforme dito no início desta resposta) e o :not(script) irá impedir que seja selecionado conteúdo de scripts, que não interessa neste caso.

No objeto links você pode criar uma lista de palavras, seguido do link que deseja para cada uma:

var links = {
   "contato": "linkcontato.html",
   "ajuda": "linkajuda.html" ← link da palavra
}     ↑
  palavra a ser
   substituída

Edit

Para pular tags que não possuem innerHTML pode-se incluir o conteúdo do primeiro for em um if que faz essa verificação:

for(var x=0; x<bodi.length; x++){
   if(bodi[x].innerHTML.length){ // ← ignora tags sem innerHTML
      var html = bodi[x].innerHTML;
      for(var i in links){
         var re = new RegExp("\\b(?![^<]*?>)("+i+")(?!>)", "gi");
         html = html.replace(re, ' <a href="'+links[i]+'">$1</a>');
      }
      bodi[x].innerHTML = html;
   }else{
      console.log(bodi[x]);
   }
}
14
  • se eu quiser que pegue somente dentro de uma div com uma classe especifica eu devo mudar document.querySelectorAll("body *:not(script)"); para getElementsByClassName("nome");?
    – user117425
    22/07/2018 às 15:03
  • algumas palavras são seguidas por &nbsp; exemplo &nbsp;Confirmação como faço pra funcionar com essas palavras também?
    – user117425
    22/07/2018 às 16:13
  • Altere duas linhas: var re = new RegExp("([\\s|&nbsp;]"+i+"(?:(?=[,<.\\s])))", "gi"); e return ' <a href="'+links[i]+'">'+a.match(/[A-zÀ-ú]+/)[0]+'</a>';
    – Meu ovo
    22/07/2018 às 16:37
  • 1
    ótimo script, mas como fazer para pegar 2 palavras ou mais? por exemplo "contato aqui": "linkcontato.html", ou "abaixo-assinado": "linkcontato.html"
    – Mark Vaaz
    22/07/2018 às 17:14
  • @MarkVaaz Código alterado e melhorado.
    – Meu ovo
    22/07/2018 às 19:38
2

Imaginando que este texto esteja dentro de um elemento HTML, exemplo:

<div class="texto">Você talvez precise de ajuda, caso tenha duvidas entre em contato conosco</div>

Você pode usar esta função:

function substitiuirPalavraPorLink (palavras) {
  var textos = document.getElementsByClassName('texto');

  if (textos) {
    for (i = 0; i < textos.length; i++) {
      for (j = 0; j < palavras.length; j++) {
        if (textos[i].innerHTML.search(palavras[j].palavra) ) {
          textos[i].innerHTML=textos[i].innerHTML.replace( palavras[j].palavra, criarLink(palavras[j].link, palavras[j].palavra));
        }
      }
    }
  }

}

function criarLink (link, palavra) {
  return '<a href="' + link + '">' + palavra + '</a>';
}

function Substituir(){
//define quais palavras serão substituidas pelo respctivo link
var palavras = [{
    palavra: 'contato',
    link: 'http://meusite.com/pagina1.html'
  },
  {
    palavra: 'ajuda',
    link: 'http://meusite.com/pagina1.html'
  }
];
substitiuirPalavraPorLink(palavras);
}
<div class="texto">Você talvez precise de ajuda, caso tenha duvidas entre em contato conosco</div>

<div class="texto">Caso tente entrar em contato, não peça ajuda</div>

<input type='button' onCLick="Substituir();" value="Substituir" />

Basicamente o que a rotina faz é encontar todas as tags com a classe Texto usando o método getElementsByClassName e substituir as palavras em fornecidas em uma lista.

4
  • E se eu quiser que seja dentro do <body> e alterar para document.getElementsByTagName("BODY"); tem algum problema? pode haver algum mal funcionamento na pagina?
    – user117425
    22/07/2018 às 2:39
  • Se você garantir que as palavras não serão propriedade de uma tag especifica, não vejo problemass 22/07/2018 às 2:46
  • eu quero que o script execute quando a pagina carregar onde coloco window.onload?
    – user117425
    22/07/2018 às 2:57
  • eu apliquei o script na pagina e retornou alguns erros pode me ajudar? stackoverflowteste.blogspot.com/2018/07/teste.html
    – user117425
    22/07/2018 às 3:16

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