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

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 ,