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

CodePudding user response：

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 >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(" ", "-")

console.log(elem.href)

<li><span >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(" ", "-");
  console.log(e.href)
})

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

CodePudding user response：

• 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, "-"));
});

<a id="replacewhitespace" href="/properties-for-sale in Los Angeles">Los Angeles</a>  
<br>
<a id="replacewhitespace" href="/some spaces here">Los Spaces</a>

CodePudding user response：

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(' ', '-');
}


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 (?!).

CodePudding user response：

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;

<li><span >Penthouses</span> for sale in <span id="property-area"><a id="replacewhitespace" href="/properties-for-sale in Los Angeles">Los Angeles</a></span></li>