How to get some first characters and the rest of the characters in two different variables in jQuery?

Question

I have number which has 18 decimal points. I want to get the digits before the decimal points in a variable and the digits after the decimals in another variable.

Let's say the original variable value is 100,

I want to show that like this 100.000000000000000000 but now I am getting 100000000000000000000 (without decimal point)

I am trying to print the digits before the decimal points in a HTML element and the rest in another HTML

<div class="original"></div>

var original = data['result'];
$(".original").html(original]);

This prints 100000000000000000000 in the element original and that's fine.

Now I want to print the digits before the decimal points in a HTML element 'beforeDecimal' and point then the rest

So my mark up is:

<div class="beforeDecimal"></div> . <div class="afterDecimal"></div>

var beforeDecimal = data['result']; // how do I have to change this ?
$(".beforeDecimal").html(beforeDecimal]);

var afterDecimal = data['result']; // how do I have to change this ?
$(".afterDecimal").html(afterDecimal]);

if I use var beforeDecimal = parseFloat(data['result']).toFixed(4); is shows 100.00000000000e+21 but I want 100 . 000000000000000000

How can I do this?

Answer 1

EDIT

Turns out that the number should be considered a string...
Because the entire AND the decimals (always 18) are "merged" (the dot is removed).

Additionally... We are working with a "too big" integer for simple JS.
So here comes BigInteger.js which enables us to turn that big number into a string without error.

Then, that is just sub-string management!

That was a good one!
;)

$(document).ready(function(){

  // Our start point...
  var data = [];
  data['result'] = 2287852333330000000000;

  // To see why use "bigInt" library !!!
  var numberWRONG = data['result'].toString();
  console.log("numberWRONG: "+numberWRONG);


  var number = bigInt(data['result']);
  console.log(number);
  
  numberString = number.toString();
  console.log(numberString);

  // Now were ok to just string manipulate... Knowing we always have 18 decimals.
  
  // Get the lenghts.
  var numberLength = numberString.length;
  var entireLength = numberLength - 18;
  var decimalLength = numberLength - entireLength;
  
  // cut the sub-strings.
  var entire = numberString.substr(0,entireLength);
  var decimals = numberString.substr(entireLength,numberLength);
  
  // Append the parts in the right divs.
  $(".beforeDecimal").html(entire);
  $(".afterDecimal").html(decimals);
});

div{
  display:inline-block;
}
.beforeDecimal{
  color:blue;
}
.afterDecimal{
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/big-integer/1.6.26/BigInteger.min.js"></script>

<div class="beforeDecimal"></div> . <div class="afterDecimal"></div>