如何移除HTML div元素内容中的逗号？能否通过CSS/JS不修改HTML实现？

CSS搞不定这个需求 #

• CSS只管样式渲染，没法直接修改DOM里的文本内容。
• 这里的逗号是没被标签包裹的裸文本节点，CSS根本选不到单个的逗号字符，最多只能用visibility: hidden这类方法把它藏起来，但没法彻底删掉，还容易打乱页面布局。

JavaScript可以轻松实现 #

通过DOM操作定位目标元素，替换掉文本里的所有逗号就行，给你两种靠谱的实现方式：

写法一：直接替换innerHTML #

const testDiv = document.querySelector('.test');
testDiv.innerHTML = testDiv.innerHTML.replace(/,/g, '');

这种方式简单粗暴，能一次性清除元素内所有逗号（包括文本里的，此处属性中无逗号无需担心影响），不管元素内部DOM结构复杂与否都能正常生效。

写法二：精准遍历文本节点替换 #

要是担心innerHTML替换会破坏已绑定的事件，可以只遍历文本节点单独处理：

function clearCommas(el) {
  const nodes = el.childNodes;
  for (let i = 0; i < nodes.length; i++) {
    const node = nodes[i];
    if (node.nodeType === Node.TEXT_NODE) {
      node.textContent = node.textContent.replace(/,/g, '');
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      clearCommas(node);
    }
  }
}

const testDiv = document.querySelector('.test');
clearCommas(testDiv);

这种方式只会修改文本节点的内容，不会改动元素结构和已绑定的事件，安全性更高。

内容的提问来源于stack exchange，提问作者Shahpari