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:
<a id="replacewhitespace" href="/properties-for-sale in Los Angeles">Los Angeles</a>
Changed into:
<a id="replacewhitespace" href="/properties-for-sale-in-Los-Angeles">Los Angeles</a>
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;<li><span class="property-type">Penthouses</span> for sale in <span id="property-area"><a id="replacewhitespace" href="/properties-for-sale in Los Angeles">Los Angeles</a></span></li>Can anyone help/guide me in the right direction?
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)<li><span class="property-type">Penthouses</span> for sale in <span id="property-area"><a id="replacewhitespace" href="/properties-for-sale in Los Angeles">Los Angeles</a></span></li>Or more simply:
var elem = document.getElementById("replacewhitespace");
elem.href = elem.href.replaceAll("%20", "-")
console.log(elem.href)<li><span class="property-type">Penthouses</span> for sale in <span id="property-area"><a id="replacewhitespace" href="/properties-for-sale in Los Angeles">Los Angeles</a></span></li>If you have multiple links, you can do:
document.querySelectorAll("a[href*=' ']").forEach(e => {
e.href = e.href.replaceAll("%20", "-");
console.log(e.href)
})<li><span class="property-type">Penthouses</span> for sale in <span id="property-area">'
<a id="replacewhitespace" href="/properties-for-sale in Los Angeles">Los Angeles</a>
<a id="replacewhitespace" href="/properties-for-sale in Los Angeles">Los Angeles</a>
</span></li>g flag for the RegExp parthref attribute by using the Attribute [href*=' '] selector:const elsHrefWithSpaces = document.querySelectorAll("[href*=' ']");
elsHrefWithSpaces.forEach(el => {
el.setAttribute("href", el.getAttribute("href").replace(/ /g, "-"));
});<a id="replacewhitespace" href="/properties-for-sale in Los Angeles">Los Angeles</a>
<br>
<a id="replacewhitespace" href="/some spaces here">Los Spaces</a>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();<a id="replacewhitespace" href="/penthouses for sale in Los Angeles">Los Angeles</a>Works in the JSFiddle at least - i guess this will do the trick (?!).