在超鏈接中使用javascript將空格替換為破折號？

我正在嘗試將一堆包含空格的自動生成鏈接格式化為空格已被“-”（破折號）替換的版本，如下所示：

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

空白斷開鏈接。

我對 javascript 很陌生，并且一直在嘗試從網上研究的一堆東西，但我似乎無法找到一種方法來定位鏈接的“href”部分。到目前為止，我設法將以下內容放在一起，但它只會更改“普通”文本（在前端看到）。我需要定位 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>

任何人都可以幫助/指導我正確的方向嗎？

謝謝。

uj5u.com熱心網友回復：

您必須首先使用 解碼錨的目標（通過href屬性訪問）decodeURI，然后使用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>

或者更簡單地說：

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

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>

如果你有多個鏈接，你可以這樣做：

document.querySelectorAll("a[href*=' ']").forEach(e => {
  e.href = e.href.replaceAll(" ", "-");
  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>

uj5u.com熱心網友回復：

• 不需要修改innerHTML，只需要使用Element.getAttribute和Element.setAttribute
• 使用RegExp 部分的Global標志使用String.prototype.replaceAll或String.prototype.replace g
• href使用屬性選擇器查找屬性內所有帶有空格的元素[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>

uj5u.com熱心網友回復：

多謝你們！

就在答案即將到來時，我設法通過一點點（！！！ - 在此之前花費 2 小時 :-D ）在 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>

至少在 JSFiddle 中作業 - 我想這會成功（？！）。

uj5u.com熱心網友回復：

getAttribute與charreplaceAll一起使用' '

var orignalstring = document.getElementById("replacewhitespace").getAttribute('href');
console.log(orignalstring)
var newstring = orignalstring.replaceAll(" ","-");
console.log(newstring)
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>

標籤：javascript html

上一篇：過濾URL的最后一個斜杠并回傳最后一個字符

下一篇：JavaScript自定義星級評分系統