用 JS 替換 span 的內容

Question

我有多個跨度元素： <span class="sac-chat-name">username : </span>

我想刪除冒號前的第一個空格。

我用這樣的 JS 試過：

var y = document.getElementsByClassName("sac-chat-name");
var i;
for (i = 0; i < y.length; i++) {
  y[i].replace(" : ", ": ");
}

但這不起作用：

Uncaught TypeError: y[i].replace is not a function …

錯誤在哪里？

Answer 1

您的代碼中有兩個問題：

1. 您使用的是元素本身而不是文本內容，您必須使用innerText或textContent來使用文本。
2. replace()方法返回一個新字符串，其中部分或所有模式匹配項被替換項替換。 您必須通過replace()的重新調整結果重新分配元素文本內容：

 var y = document.getElementsByClassName("sac-chat-name"); var i; for (i = 0; i < y.length; i++) { y[i].textContent = y[i].textContent.replace(" : ", ": "); }

 <span class="sac-chat-name">username : </span>

Answer 2

JavaScript 替換方法是一個字符串原型。 話雖如此，您不能在節點上使用它。

var y = document.getElementsByClassName("sac-chat-name");
var i;
for (i = 0; i < y.length; i++) {
  // get the current content 
  var curText = y[i].innerHTML;
  // sanitize content
  var sanitized = curText.replace(" : ", ": ");
  // replace content
  y[i].innerHTML = sanitized;
}

因此，首先您必須獲取元素的當前內容。 您可以使用innerHTML執行此操作，然后您可以清理字符串並替換元素的 HTML。

Answer 3

Mamun 說的對，你也可以去扔一個Array，forEach 循環更容易閱讀

var spans = Array.from(document.getElementsByClassName('sac-chat-name'));
spans.forEach(span => {

   span.innerHTML = span.innerHTML.replace(" :", ":");
});

Answer 4

為了替換字符串中的特定空格，您也可以使用 REGEX。

 y.textContent.replace(/\s/g,'');