仅使用纯JavaScript修改所有链接的href属性

Question

I have an email template to send on a shipping notification that includes a shipping tracking number as below and I need to clear all the spaces from href using plain javascript:

<a class="press-bt" id="clearSpace" href="https://www.royalmail.com/track-your-item?trackNumber=JX12 0008 990 90GB">TRACK</a>

I can get it right using jQuery but not using Javascript

I am trying to do it this way:

window.onload = function() {
    var str = document.getElementById("mylink");
    document.write( str.replaceAll("\\s+","") );
});

Working code using jQuery:

$(document).ready(function() {
    $('a').attr('href', function (_, val) {
        return val.replace(/\s/g, '');
    });
});

Answer 1

You should, if possible, remove the spaces server-side. I hope you understand no javascript will run in the emails you send.

// This prevents multiple `window.onload` conflict
window.addEventListener("load", clearLinks);
// This allows you to call the function even later if needed
function clearLinks() {
  // Get list of all links in the page
  var links = document.getElementsByTagName("a"); 
  // Loop through links
  for(var i=0,l=links.length; i<l; i++) {
     // No need to use `getAttribute`, href is defined getter in all browsers
     links[i].href = links[i].href.replace(/\s/g, "");
  }
}

In modern browsers, you can replace the for loop with Array.prototype.forEach . This method can be normally called on arrays ( [ ... ] ), but the list returned by getElementsByTagName is not an array, so use this trick:

function clearLinks() {
  var links = document.getElementsByTagName("a"); 
  // Loop through links
  Array.prototype.forEach.call(links, function(link) {
    link.href = link.href.replace(/[cC]/g, "c");
  });
}

Search for Function.prototype.call to learn more about calling functions on objects.

Answer 2

Target the element by its id , grab the href attribute, and set it again by removing the spaces.

var link = document.getElementById("mylink");
var href = link.getAttribute('href');
link.setAttribute('href', href.replace(/\s/g, ''));