加载时将点替换为不在 DOM 中的文本的逗号

Question

我正在使用 WordPress 主题，需要修改计数器动画的输出。 页面加载时，有一个像这样的空跨度：

<span class="counter"></span>

动画结束后，span是这样的：

<span class="counter">30.5</span>

因为它是一个德国网站，输出需要用逗号而不是点，所以它应该是这样的：30,5
我怎样才能做到这一点？

阅读类似的帖子，看起来我需要一个 WebKitMutationObserver（？），但我没有使用它的经验。感谢您的帮助！

Answer 1

const elCounter = $('#counter');

$('button').on('click', () => {
  $({progress: 0}).animate(
    {progress: 1000}, {
    duration: 30000,
    step: val =>  {
      elCounter.text((val / 10).toFixed(2));
    }}
  )
});

new MutationObserver(() => {
  const replacement = elCounter.text().replace('.', ',');
  
  if(elCounter.text() !== replacement){
    elCounter.text(replacement);
  }
})
.observe(elCounter[0], { childList: true });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="counter">0</div>
<button>Go progress</button>

Answer 2

使用

value.toLocaleString('en-de',{...})

会解决你的目的

const counterElement = document.querySelector('.counter');
const value = parseFloat(counterElement.textContent);
const formattedValue = value.toLocaleString('en-de', {
  minimumFractionDigits: 1,
  maximumFractionDigits: 1
});
counterElement.textContent = formattedValue;

<span class="counter">30.5</span>