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