2

É possível manipular apenas uma parte da URL usando DOM ou algo do tipo?

Gostaria de remover o '#' no meio da url, no atributo href.

O código será adicionado em um tema Wordpress e deve ser ativado ao carregar a página.

Como está atualmente:

<div class="rodape">
   <a class="azul" href="http://site.com/departamento/#consultoria-um"
   title="Detalhes">Detalhes</a>
   <a class="azul" href="http://site.com/departamento/#consultoria-dois"
   title="Detalhes">Detalhes</a>
</div>

Resultado final (sem # no link):

<div class="rodape">
   <a class="azul" href="http://site.com/departamento/consultoria-um"
   title="Detalhes">Detalhes</a>
   <a class="azul" href="http://site.com/departamento/consultoria-dois"
   title="Detalhes">Detalhes</a>
</div>
3
  • Você quer remover somente o '#'? ou ele e tudo o que vem após ele? isso é ao abrir a página ou após executar alguma ação específica? 31/01/2017 às 2:01
  • De onde vem esse HTML? Podes manipular no servidor?
    – Sergio
    31/01/2017 às 6:11
  • Quero remover apenas o # ao abrir a página. É um tema no Wordpress hospedado em servidor próprio.
    – Grego
    31/01/2017 às 22:47

3 Respostas 3

1

Sim, é possível fazer isso capturando o valor do atributo href e manipulando-o.

Exemplo funcional

document.getElementById('bt-remover-hashs').addEventListener('click', removerHashtags);

function removerHashtags(){
  var links = document.getElementById('rodape').getElementsByTagName('a');

  for(var i = 0; i < links.length; i++){  
    links[i].href = links[i].href.replace('#', '');  
    console.log(links[i].href);
  }
}
<div class="rodape" id="rodape">
   <a class="azul" href="http://site.com/departamento/#consultoria-um"
   title="Detalhes">Detalhes</a>
   <a class="azul" href="http://site.com/departamento/#consultoria-dois"
   title="Detalhes">Detalhes</a>
</div>

<button id="bt-remover-hashs">Remover #</button>

1

Caso utilize jquery segue o código:

newlink = $(".azul").attr("href").replace("#","");
$(".azul").attr("href",newlink);
0

Um jeito diferente:

document.querySelectorAll('.rodape a').forEach(function(el) {
  el.setAttribute('href', el.getAttribute('href').replace('#', ''));
  console.log(el);
});
<div class="rodape">
   <a class="azul" href="http://site.com/departamento/#consultoria-um"
   title="Detalhes">Detalhes</a>
   <a class="azul" href="http://site.com/departamento/#consultoria-dois"
   title="Detalhes">Detalhes</a>
</div>

Uso o seletor .rodape a para pegar todos os anchor dentro da div com a classe rodape, e faço um loop com os elementos, dai tiro o # com a função replace e atualizo o atributo href com o link formatado.

4
  • JuniorNunes, testei e vi que deu certo em uma página comum, mas quando adiciono no Wordpress não funciona, sabe o que pode ser? Testei direto no código e posteriormente em plugins que inserem js na tema e nada.
    – Grego
    1/02/2017 às 15:40
  • @Grego tenta colocar o código dentro de: window.onload = function() { // codigo aqui } 1/02/2017 às 15:51
  • Deu certo, muito obrigado! Salvou uma vida, hahaha.
    – Grego
    1/02/2017 às 16:12
  • @Grego se a resposta funcionou marque ela como solução ao lado esquerdo para que outras pessoas sejam ajudadas! 1/02/2017 às 16:20

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 .