Replace white space with a dash using javascript inside a hyperlink?

Question

I'm trying to format a bunch of auto generated links containing white spaces, into versions where the white spaces have been replaced by "-" (dash) like this:

Los Angeles

Changed into:

Los Angeles

The white space breaks the links.

I'm quite new to javascript, and been trying a bunch of stuff from researching online, but i can't seem to find a way to target the "href" part of a link. Up until now i managed to put the following together, but it only changes "normal" text (seen in the front-end). I need to target the html/href part.

var orignalstring = document.getElementById("replacewhitespace").innerHTML;
var newstring = orignalstring.replace("","-");
document.getElementById("replacewhitespace").innerHTML = newstring;

Penthouses for sale in Los Angeles

Can anyone help/guide me in the right direction?

user_14251221 · Answer

You'll have to first decode the anchor's target (accessed via the href property) with decodeURI, then use replaceAll:

var orignalstring = document.getElementById("replacewhitespace").href;
var newstring = decodeURI(orignalstring).replaceAll(" ","-");
document.getElementById("replacewhitespace").href = newstring;

console.log(newstring)

Penthouses for sale in Los Angeles

Or more simply:

var elem = document.getElementById("replacewhitespace");
elem.href = elem.href.replaceAll("%20", "-")

console.log(elem.href)

Penthouses for sale in Los Angeles

If you have multiple links, you can do:

document.querySelectorAll("a[href*=' ']").forEach(e => {
  e.href = e.href.replaceAll("%20", "-");
  console.log(e.href)
})

Penthouses for sale in '
Los Angeles
Los Angeles

user_383904 · Answer

You don't need to modify the innerHTML, just use Element.getAttribute and Element.setAttribute
Use String.prototype.replaceAll or String.prototype.replace using the Global g flag for the RegExp part
Find all your elements with space inside a href attribute by using the Attribute [href*=' '] selector:

const elsHrefWithSpaces = document.querySelectorAll("[href*=' ']");

elsHrefWithSpaces.forEach(el => {
  el.setAttribute("href", el.getAttribute("href").replace(/ /g, "-"));
});

Los Angeles  


Los Spaces

user_11148069 · Answer

Thanks guys!

Just as the answers were coming in, i managed to do it this way by a little (!!! - spend 2 hours prior to this :-D ) tampering around in JSFiddle:

function replace() {
    var aEl = document.getElementById('replacewhitespace');
    aEl.href = aEl.href.replaceAll('%20', '-');
}


replace();

Los Angeles

Works in the JSFiddle at least - i guess this will do the trick (?!).

user_1461850 · Answer

Use getAttribute and replaceAll with a ' ' char

var orignalstring = document.getElementById("replacewhitespace").getAttribute('href');
console.log(orignalstring)
var newstring = orignalstring.replaceAll(" ","-");
console.log(newstring)
document.getElementById("replacewhitespace").innerHTML = newstring;

Penthouses for sale in Los Angeles

Replace white space with a dash using javascript inside a hyperlink?

4 Answers