移动端动画计数器功能异常问题求助

问题情况 #

动画计数器用于模拟统计数据，桌面浏览器运行正常，但生产环境下移动端访问时，999以上的数字出现解析/转换问题，导致初始数值重置。控制台日志显示，解析格式化后的数字时只得到了4，而非完整的4898988。

问题根源 #

从日志可见，格式化后的数字是4 898 988 USD，这里的千分位分隔符是窄空格（U+202F），而非普通逗号。原代码中仅用replace(/,/g, '')替换逗号，没处理这种特殊空格，导致parseInt读到第一个非数字字符（窄空格）就停止解析，只提取出了开头的4。

修复方案 #

方案1：保存原始数值（推荐） #

直接在初始时保存原始数字，后续动画逻辑基于该数值操作，避免反复从DOM解析格式化后的字符串，彻底规避兼容性问题。

修改后的代码：

document.addEventListener('DOMContentLoaded', (event) => {
  const counterElement = document.getElementById('counter');
  // 直接保存原始数值，不再依赖DOM解析格式化文本
  let currentCount = parseInt(counterElement.textContent, 10);
  // 初始格式化显示
  counterElement.textContent = `${currentCount.toLocaleString()} USD`;
  
  animateCount(counterElement, currentCount);
  
  function animateCount(targetElement, count) {
    const finalCount = count + Math.floor(Math.random() * 31);
    const interval = setInterval(() => {
      if (count < finalCount) {
        count++;
        targetElement.textContent = `${count.toLocaleString()} USD`;
      } else {
        clearInterval(interval);
        setTimeout(() => animateCount(targetElement, count), Math.random() * 9000 + 5000);
      }
    }, 100);
  }
});

方案2：修复解析逻辑 #

如果必须从DOM读取内容解析，就移除所有非数字字符，不管是逗号、窄空格还是货币符号：

修改animateCount中的解析行：

// 替换所有非数字字符
let count = parseInt(targetElement.textContent.replace(/[^0-9]/g, ''), 10);

或者更简洁的写法：

let count = parseInt(targetElement.textContent.replace(/[^\d]/g, ''), 10);

补充说明 #

toLocaleString的千分位分隔符会因浏览器、系统区域设置不同而变化：桌面端常用逗号，部分移动端浏览器会用窄空格或其他字符。方案1直接操作原始数值，是最可靠且性能最优的解决方式。

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