Estoy tratando de formatear un montón de enlaces generados automáticamente que contienen espacios en blanco, en versiones donde los espacios en blanco han sido reemplazados por "-" (guión) como este:
<a id="replacewhitespace" href="/properties-for-sale in Los Angeles">Los Angeles</a>Cambiado en:
<a id="replacewhitespace" href="/properties-for-sale-in-Los-Angeles">Los Angeles</a>El espacio en blanco rompe los enlaces.
Soy bastante nuevo en javascript y he estado probando un montón de cosas investigando en línea, pero parece que no puedo encontrar una manera de apuntar a la parte "href" de un enlace. Hasta ahora logré juntar lo siguiente, pero solo cambia el texto "normal" (visto en el front-end). Necesito apuntar a la parte html/href.
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>¿Alguien puede ayudarme/guiarme en la dirección correcta?
Primero tendrá que decodificar el objetivo del ancla (al que se accede a través de la propiedad href ) con decodeURI , luego 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>O más simplemente:
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>Si tienes varios enlaces, puedes hacer:
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 para la parte RegExphref usando el selector Attribute [href*=' '] : 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>¡Gracias chicos!
Justo cuando llegaban las respuestas, me las arreglé para hacerlo un poco de esta manera (!!! - pasé 2 horas antes de esto :-D) manipulando 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>Funciona en JSFiddle al menos, supongo que esto funcionará (?!).