如何用JavaScript修改相同类名所有元素内容，格式化.currency-text数值为千分位

下面是高效且对新手友好的实现方式，不需要手动遍历整个DOM树，直接用浏览器原生API即可完成：

• 用document.querySelectorAll('.currency-text')快速匹配所有符合类名要求的元素，该API基于CSS选择器匹配，性能表现优异
• 遍历匹配到的元素集合，逐个处理文本内容后替换即可

完整可运行代码 #

// 你原有的格式化函数
function formatText(x) {
   return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

// 批量应用千分位格式化
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有带.currency-text类的元素
  const currencyElements = document.querySelectorAll('.currency-text');
  
  currencyElements.forEach(element => {
    // 提取原始文本并清理空格
    const rawContent = element.textContent.trim();
    // 仅对合法数字做格式化，避免非数字内容报错
    const numericValue = Number(rawContent);
    if (!isNaN(numericValue)) {
      element.textContent = formatText(numericValue);
    }
  });
});

注意事项 #

• 代码包裹在DOMContentLoaded事件回调中，是为了确保页面DOM完全渲染完成后再执行，避免出现找不到元素的问题
• 代码中增加了数字合法性校验，如果你确定所有对应类的元素内容都是纯数字，可以去掉校验逻辑
• 如果页面存在动态插入的带.currency-text类的元素（比如AJAX加载、前端渲染生成的新元素），在新元素插入DOM后重新执行一遍上述遍历逻辑即可
• 该API兼容所有主流浏览器，不需要引入任何第三方框架即可使用

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