How to manipulate part of the href attribute of a link using Javascript in Wordpress?

Asked

Viewed 655 times

2

It is possible to manipulate only a part of the URL using DOM or something like?

I would like to remove '#' in the middle of the url, in the href attribute.

The code will be added in a Wordpress theme and must be activated when loading the page.

As it is currently:

<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>

Final result (no # on 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>
javascript wordpress

  • Do you want to remove only '#'? or it and everything that comes after it? This is when opening the page or after performing some specific action?

  • Where does this HTML come from? You can manipulate on the server?

  • I want to remove only # when opening the page. It is a Wordpress theme hosted on own server.

3 answers

1

Yes, you can do this by capturing the value of the attribute href and manipulating him.

Functional example

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

If use jquery follows the code:

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

0


A different way:

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>

I use the selector .rodape a to catch all the Anchor inside the div with the rodape class, and make a loop with the elements, then shoot the # with the function replace and update the attribute href with the formatted link.

  • Juniornunes, I tested and saw that worked in a common page, but when I add in Wordpress does not work, you know what can be? I tested directly in the code and later in plugins that insert js in the theme and nothing.

  • @Greek tries to put the code inside: window.onload = Function() { // code here }

  • It worked out, thank you very much! Saved a life, hahaha.

  • @Greek if the answer worked mark it as solution on the left side for other people to be helped!

Browser other questions tagged javascript wordpress

You are not signed in. Login or sign up in order to post.