我如何设置数字样式？ [英] How do I style numbers?

问题描述

我正在尝试改变数字的样式。

I am trying to change the styling of numbers.

• 我想在每3位数字之间添加一些空格。


• 我会确切知道数字将位于html中。


• 当我从html中检索号码时，它需要与我输入的号码完全相同。所以我只想设置数字，而不是修改数字。


• 我可以使用javascript和/或css来尝试实现这个

• I want to add some space between every 3 digits.
• I will know exactly where the numbers will be located in the html.
• When I retrieve the number from the html it needs to be the exact same number as I entered. So I only want to style the number, not modify the number.
• I may use javascript and/or css to try an achieve this

//test for success . . . do not remove
if(document.getElementById('number').innerHTML !== "1000"){
  alert('Wrong answer, you changed the number!!!');
}

<p id="number">1000<p>

<p>The 1000 above should show up like 1 000<p>

推荐答案

尝试这样的事情。

const numberWithSep = (x) => {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "<div class='sep'></div>");
}

var num = numberWithSep('12345678');


document.getElementById("number").innerHTML = num;

//retrive like this
console.log(document.getElementById("number").innerText);

.sep {
  display: inline-block;
  padding: 10px;
}

<p id="number"><p>

如果您希望分隔符为逗号（，）只需将 div 更改为，

If you want the separator as comma (,) just change the div to ,

这篇关于我如何设置数字样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！