How do I style numbers?

Question

I am trying to change the styling of numbers.

• 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>

Answer 1

This is simple and easy:

const numberFormat = (x) => {
  return x.replace(/(.{4})/g, "$1 ");
}

Answer 2

I suggest to use display:flex so that the "sep" character is in auto-determined font-size.

The idea is that turn <p>1000</p> into <p><span>1</span><span>0</span><span>0</span><span>0</span></p> by js.

Then, add "sep" character visually by css generated content. span:nth-last-of-type(3n) { content:<sep>; ..}. This way, the <sep>(can be any character actually) will have same font-size as number text.

demo

Answer 3

Try something like this.

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>

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